Skip to content

Commit ff69f38

Browse files
committed
Refined README
Cleared up and expanded on a few points
1 parent 1473221 commit ff69f38

File tree

1 file changed

+17
-15
lines changed

1 file changed

+17
-15
lines changed

README.md

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@
22

33
A small package to provide an autocomplete list as a user is typing.
44

5-
### Links
5+
### Contents
66

7+
- [Features](#features)
8+
- [Usage](#usage)
9+
- [Strong Types](#strong-types)
710
- [Options](#options)
811
- [Option Methods](#option-methods)
912
- [Change log](./CHANGELOG.md)
@@ -12,7 +15,7 @@ A small package to provide an autocomplete list as a user is typing.
1215
### Features
1316

1417
- 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
1619
- Complete control over construction, with custom renderers
1720
- Option to automatically focus on the first element when the menu opens
1821
- Configurable delay between keystrokes and source calls
@@ -42,11 +45,11 @@ new Autocomplete(
4245
.start();
4346
```
4447

45-
<details><summary>
46-
<h3>Custom source type</h3>
47-
</summary>
48+
### Strong Types
4849

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!
5053

5154
In this example I've provided an array of inputs (that will always be returned) - this is also strongly typed!
5255

@@ -56,7 +59,7 @@ type MyType = {
5659
myCustomValue: string;
5760
}
5861

59-
// Using the custom MyType (which is now tightly-bound)
62+
// Specifying MyType means "source" is now tightly-bound
6063
new Autocomplete<MyType>(
6164
'.autocomplete',
6265
{
@@ -81,7 +84,9 @@ new Autocomplete<MyType>(
8184

8285
li.dataset.value = item.myCustomName;
8386

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'"
8590

8691
li.innerText = item.myCustomValue;
8792

@@ -93,8 +98,6 @@ new Autocomplete<MyType>(
9398
.start();
9499
```
95100

96-
</details>
97-
98101
## Options
99102

100103
### source: `SourceTypes<T>`
@@ -177,11 +180,12 @@ Called as soon as an item is focused, but before changing its state
177180
**Call:**
178181

179182
```TS
183+
// T is your generic type, if specified
180184
onItemFocus: (
181185
ev: Event,
182186
data: {
183187
ul: HTMLUListElement
184-
item: <T>, // Your generic type, if specified
188+
item: <T>,
185189
input: HTMLInputElement
186190
}
187191
) => {}
@@ -193,11 +197,12 @@ Called as soon as an item is selecetd, but before changing any state
193197
**Call:**
194198

195199
```TS
200+
// T is your generic type, if specified
196201
onItemSelect: (
197202
ev: Event,
198203
data: {
199204
ul: HTMLUListElement
200-
item: <T>, // Your generic type, if specified
205+
item: <T>,
201206
input: HTMLInputElement
202207
}
203208
) => {}
@@ -228,7 +233,6 @@ Called before processing the search
228233
**Call:**
229234

230235
```TS
231-
// T is your generic type, if specified
232236
onSearch: (ev: Event, data: { term: string }) => {}
233237
```
234238

@@ -238,7 +242,6 @@ A method called after events have been added
238242
**Call:**
239243

240244
```TS
241-
// T is your generic type, if specified
242245
onStart: () => {}
243246
```
244247

@@ -248,6 +251,5 @@ A method called after events have been removed
248251
**Call:**
249252

250253
```TS
251-
// T is your generic type, if specified
252254
onStop: () => {}
253255
```

0 commit comments

Comments
 (0)