2
2
3
3
A small package to provide an autocomplete list as a user is typing.
4
4
5
- ### Links
5
+ ### Contents
6
6
7
+ - [ Features] ( #features )
8
+ - [ Usage] ( #usage )
9
+ - [ Strong Types] ( #strong-types )
7
10
- [ Options] ( #options )
8
11
- [ Option Methods] ( #option-methods )
9
12
- [ Change log] ( ./CHANGELOG.md )
@@ -12,7 +15,7 @@ A small package to provide an autocomplete list as a user is typing.
12
15
### Features
13
16
14
17
- Supports different sources; whether ` string ` , ` object ` , ` array ` or callback
15
- - Allows customization of the source type with strong types
18
+ - Allows specification of the source type with strong types
16
19
- Complete control over construction, with custom renderers
17
20
- Option to automatically focus on the first element when the menu opens
18
21
- Configurable delay between keystrokes and source calls
@@ -42,11 +45,11 @@ new Autocomplete(
42
45
.start ();
43
46
```
44
47
45
- <details ><summary >
46
- <h3 >Custom source type</h3 >
47
- </summary >
48
+ ### Strong Types
48
49
49
- You can also specify the source type for some strong types!
50
+ As the package is written in TypeScript, you can specify the ` source ` 's type.
51
+
52
+ With the type specified you can write your TypeScript with strong type definitions!
50
53
51
54
In this example I've provided an array of inputs (that will always be returned) - this is also strongly typed!
52
55
@@ -56,7 +59,7 @@ type MyType = {
56
59
myCustomValue: string ;
57
60
}
58
61
59
- // Using the custom MyType (which is now tightly-bound)
62
+ // Specifying MyType means "source" is now tightly-bound
60
63
new Autocomplete <MyType >(
61
64
' .autocomplete' ,
62
65
{
@@ -81,7 +84,9 @@ new Autocomplete<MyType>(
81
84
82
85
li.dataset.value = item .myCustomName ;
83
86
84
- // li.innerText = item.detail; <-- This isn't in `MyType`
87
+ // li.innerText = item.detail;
88
+ // The above would now throw:
89
+ // "Property 'detail' does not exist on type 'MyType'"
85
90
86
91
li.innerText = item .myCustomValue ;
87
92
@@ -93,8 +98,6 @@ new Autocomplete<MyType>(
93
98
.start ();
94
99
```
95
100
96
- </details >
97
-
98
101
## Options
99
102
100
103
### source: ` SourceTypes<T> `
@@ -177,11 +180,12 @@ Called as soon as an item is focused, but before changing its state
177
180
** Call:**
178
181
179
182
``` TS
183
+ // T is your generic type, if specified
180
184
onItemFocus : (
181
185
ev : Event ,
182
186
data : {
183
187
ul: HTMLUListElement
184
- item : <T >, // Your generic type, if specified
188
+ item : <T >,
185
189
input: HTMLInputElement
186
190
}
187
191
) => {}
@@ -193,11 +197,12 @@ Called as soon as an item is selecetd, but before changing any state
193
197
** Call:**
194
198
195
199
``` TS
200
+ // T is your generic type, if specified
196
201
onItemSelect : (
197
202
ev : Event ,
198
203
data : {
199
204
ul: HTMLUListElement
200
- item : <T >, // Your generic type, if specified
205
+ item : <T >,
201
206
input: HTMLInputElement
202
207
}
203
208
) => {}
@@ -228,7 +233,6 @@ Called before processing the search
228
233
** Call:**
229
234
230
235
``` TS
231
- // T is your generic type, if specified
232
236
onSearch : (ev : Event , data : { term: string }) => {}
233
237
```
234
238
@@ -238,7 +242,6 @@ A method called after events have been added
238
242
** Call:**
239
243
240
244
``` TS
241
- // T is your generic type, if specified
242
245
onStart : () => {}
243
246
```
244
247
@@ -248,6 +251,5 @@ A method called after events have been removed
248
251
** Call:**
249
252
250
253
``` TS
251
- // T is your generic type, if specified
252
254
onStop : () => {}
253
255
```
0 commit comments