Skip to content

Commit ef1372a

Browse files
denis-tarandenis-taran
committed
Updated links in the documentation
1 parent ea6865d commit ef1372a

File tree

3 files changed

+81
-64
lines changed

3 files changed

+81
-64
lines changed

‎changelog.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
All notable changes to this project will be documented in this file.
44

5+
## [9.3.2] - 2024-08-08
6+
7+
- Updated some links in the documentation. No functionality was changed.
8+
59
## [9.3.0] - 2024-07-07
610

711
### Fixed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "autocompleter",
3-
"version": "9.3.1",
3+
"version": "9.3.2",
44
"description": "Blazing fast and lightweight autocomplete library without dependencies. 1KB gzipped.",
55
"main": "autocomplete.js",
66
"module": "autocomplete.es.js",

‎readme.md‎

Lines changed: 76 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
Blazing fast and lightweight autocomplete widget without dependencies. Only 1KB gzipped.
32

43
Demo: https://smartscheduling.com/en/documentation/autocomplete
@@ -16,43 +15,45 @@ npm install autocompleter
1615
Then import it into your javascript code:
1716

1817
```javascript
19-
import autocomplete from 'autocompleter';
18+
import autocomplete from "autocompleter";
2019
// or
21-
var autocomplete = require('autocompleter');
20+
var autocomplete = require("autocompleter");
2221
```
2322

2423
## Getting Started
2524

2625
```javascript
2726
var countries = [
28-
{ label: 'United Kingdom', value: 'UK' },
29-
{ label: 'United States', value: 'US' }
27+
{ label: "United Kingdom", value: "UK" },
28+
{ label: "United States", value: "US" },
3029
];
3130

32-
var input = document.getElementById('country');
31+
var input = document.getElementById("country");
3332

3433
autocomplete({
35-
input: input,
36-
fetch: function(text, update) {
37-
text = text.toLowerCase();
38-
// you can also use AJAX requests instead of preloaded data
39-
var suggestions = countries.filter(n => n.label.toLowerCase().startsWith(text))
40-
update(suggestions);
41-
},
42-
onSelect: function(item) {
43-
input.value = item.label;
44-
}
34+
input: input,
35+
fetch: function (text, update) {
36+
text = text.toLowerCase();
37+
// you can also use AJAX requests instead of preloaded data
38+
var suggestions = countries.filter((n) =>
39+
n.label.toLowerCase().startsWith(text)
40+
);
41+
update(suggestions);
42+
},
43+
onSelect: function (item) {
44+
input.value = item.label;
45+
},
4546
});
4647
```
4748

48-
[Try online](https://jsbin.com/gocayupedo/edit?html,js,output)
49+
[Try online](https://jsbin.com/tuvijarero/edit?html,js,output)
4950

5051
## Use with Typescript and Webpack
5152

5253
Simply import the autocompleter in your typescript file:
5354

5455
```javascript
55-
import autocomplete from 'autocompleter';
56+
import autocomplete from "autocompleter";
5657
```
5758

5859
and call the `autocomplete` function as showed below:
@@ -104,24 +105,24 @@ If your interface doesn't have a `label` property, you also have to provide a cu
104105

105106
You can pass the following options to `autocomplete`:
106107

107-
| Parameter | Description | Default |
108-
| --------- | ----------- | ------- |
109-
|`onSelect`|This method will be called when user choose an item in autocomplete. The selected item will be passed as first parameter.|`-`|
110-
|`input`|DOM input element must be passed with this parameter and autocomplete will attach itself to this field. Selectors are not supported, but you can just use `document.querySelector('...')` to find the required element.|`-`|
111-
|`minLength`|Specify the minimum length, when autocomplete should appear on the screen.|`2`|
112-
|`emptyMsg`|The message that will be showed when there are no suggestions that match the entered value.|`undefined`|
113-
|`render`|This method allows you to override the rendering function. It will be called for each suggestion and the suggestion object will be passed as first parameter. The current input field value will be passed as second parameter. This function must return a DIV element or `undefined` to skip rendering.|`undefined`|
114-
|`renderGroup`|The same as `render`, but will be called for each group. The first parameter of the function will be the group name. The current input field value will be passed as second parameter. This function must return a `DIV` element or `undefined` to skip rendering.|`undefined`|
115-
|`className`|The autocomplete container will have this class name if specified.|`undefined`|
116-
|`fetch`|This method will be called to prepare suggestions and then pass them to autocomplete. The first parameter is the text in the input field. The second parameter is a callback function that must be called after suggestions are prepared with an array as parameter. If you pass `false` to the callback function, autocomplete will show previous suggestions and will not re-render.|`-`|
117-
|`debounceWaitMs`|Enforces that the `fetch` function will only be called once within the specified time frame (in milliseconds) and delays execution. This prevents flooding your server with AJAX requests.|`0`|
118-
|`customize`|Callback for additional autocomplete customization after rendering is finished. Use this function if you want to change autocomplete default position.|`undefined`|
119-
|`preventSubmit`|This option controls form submission when the ENTER key is pressed in a input field. Three settings are available: `Never`, `Always`, and `OnSelect`. Choose the appropriate setting to customize form submission behavior as per your needs.|`Never`|
120-
|`showOnFocus`|Displays suggestions on focus of the input element. Note that if `true`, the minLength property will be ignored and it will always call `fetch`.|`false`|
121-
|`disableAutoSelect`|Prevents the first item in the list from being selected automatically. This option allows you to submit a custom text by pressing `ENTER` even when autocomplete is displayed.|`false`|
122-
|`container`|Provide your own container for the widget. If not specified, a new DIV element will be created.|`undefined`|
123-
|`click`|Allows to display autocomplete on mouse clicks or perform some additional actions.|`undefined`|
124-
|`keyup`|Allows to display autocomplete when a key is pressed that doesn't modify the content.|see code|
108+
| Parameter | Description | Default |
109+
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
110+
| `onSelect` | This method will be called when user choose an item in autocomplete. The selected item will be passed as first parameter. | `-` |
111+
| `input` | DOM input element must be passed with this parameter and autocomplete will attach itself to this field. Selectors are not supported, but you can just use `document.querySelector('...')` to find the required element. | `-` |
112+
| `minLength` | Specify the minimum length, when autocomplete should appear on the screen. | `2` |
113+
| `emptyMsg` | The message that will be showed when there are no suggestions that match the entered value. | `undefined` |
114+
| `render` | This method allows you to override the rendering function. It will be called for each suggestion and the suggestion object will be passed as first parameter. The current input field value will be passed as second parameter. This function must return a DIV element or `undefined` to skip rendering. | `undefined` |
115+
| `renderGroup` | The same as `render`, but will be called for each group. The first parameter of the function will be the group name. The current input field value will be passed as second parameter. This function must return a `DIV` element or `undefined` to skip rendering. | `undefined` |
116+
| `className` | The autocomplete container will have this class name if specified. | `undefined` |
117+
| `fetch` | This method will be called to prepare suggestions and then pass them to autocomplete. The first parameter is the text in the input field. The second parameter is a callback function that must be called after suggestions are prepared with an array as parameter. If you pass `false` to the callback function, autocomplete will show previous suggestions and will not re-render. | `-` |
118+
| `debounceWaitMs` | Enforces that the `fetch` function will only be called once within the specified time frame (in milliseconds) and delays execution. This prevents flooding your server with AJAX requests. | `0` |
119+
| `customize` | Callback for additional autocomplete customization after rendering is finished. Use this function if you want to change autocomplete default position. | `undefined` |
120+
| `preventSubmit` | This option controls form submission when the ENTER key is pressed in a input field. Three settings are available: `Never`, `Always`, and `OnSelect`. Choose the appropriate setting to customize form submission behavior as per your needs. | `Never` |
121+
| `showOnFocus` | Displays suggestions on focus of the input element. Note that if `true`, the minLength property will be ignored and it will always call `fetch`. | `false` |
122+
| `disableAutoSelect` | Prevents the first item in the list from being selected automatically. This option allows you to submit a custom text by pressing `ENTER` even when autocomplete is displayed. | `false` |
123+
| `container` | Provide your own container for the widget. If not specified, a new DIV element will be created. | `undefined` |
124+
| `click` | Allows to display autocomplete on mouse clicks or perform some additional actions. | `undefined` |
125+
| `keyup` | Allows to display autocomplete when a key is pressed that doesn't modify the content. | see code |
125126

126127
### Sample config using all options
127128

@@ -181,17 +182,25 @@ autocomplete({
181182
If you don't want to pass this function every time, you can also use spread operator to create your own autocomplete version with default implementation:
182183

183184
```typescript
184-
export default function autocompleteCustomized<T extends AutocompleteItem>(settings: AutocompleteSettings<T>): AutocompleteResult {
185-
return autocomplete({
186-
...settings,
187-
customize: (input: HTMLInputElement, inputRect: ClientRect | DOMRect, container: HTMLDivElement, maxHeight: number): void => {
188-
if (maxHeight < 100) {
189-
container.style.top = '';
190-
container.style.bottom = (window.innerHeight - inputRect.bottom + input.offsetHeight) + 'px';
191-
container.style.maxHeight = '200px';
192-
}
193-
}
194-
});
185+
export default function autocompleteCustomized<T extends AutocompleteItem>(
186+
settings: AutocompleteSettings<T>
187+
): AutocompleteResult {
188+
return autocomplete({
189+
...settings,
190+
customize: (
191+
input: HTMLInputElement,
192+
inputRect: ClientRect | DOMRect,
193+
container: HTMLDivElement,
194+
maxHeight: number
195+
): void => {
196+
if (maxHeight < 100) {
197+
container.style.top = "";
198+
container.style.bottom =
199+
window.innerHeight - inputRect.bottom + input.offsetHeight + "px";
200+
container.style.maxHeight = "200px";
201+
}
202+
},
203+
});
195204
}
196205
```
197206

@@ -200,7 +209,9 @@ export default function autocompleteCustomized<T extends AutocompleteItem>(setti
200209
You can call `destroy` method on the returned object in order to remove event handlers and DOM elements after usage:
201210

202211
```javascript
203-
var autocompl = autocomplete({ /* options */ });
212+
var autocompl = autocomplete({
213+
/* options */
214+
});
204215
autocompl.destroy();
205216
```
206217

@@ -210,26 +221,28 @@ You can display suggestions separated into one or multiple groups/categories:
210221

211222
```javascript
212223
var countries = [
213-
{ label: 'Canada', value: 'CA', group: 'North America' },
214-
{ label: 'United States', value: 'US', group: 'North America' },
215-
{ label: 'Uzbekistan', value: 'UZ', group: 'Asia' },
224+
{ label: "Canada", value: "CA", group: "North America" },
225+
{ label: "United States", value: "US", group: "North America" },
226+
{ label: "Uzbekistan", value: "UZ", group: "Asia" },
216227
];
217228

218229
autocomplete({
219-
minLength: 1,
220-
input: document.getElementById('country'),
221-
fetch: function(text, update) {
222-
text = text.toLowerCase();
223-
var suggestions = countries.filter(n => n.label.toLowerCase().startsWith(text))
224-
update(suggestions);
225-
},
226-
onSelect: function(item) {
227-
alert(item.value);
228-
}
230+
minLength: 1,
231+
input: document.getElementById("country"),
232+
fetch: function (text, update) {
233+
text = text.toLowerCase();
234+
var suggestions = countries.filter((n) =>
235+
n.label.toLowerCase().startsWith(text)
236+
);
237+
update(suggestions);
238+
},
239+
onSelect: function (item) {
240+
alert(item.value);
241+
},
229242
});
230243
```
231244

232-
[Try online](http://jsbin.com/sodicopeya/1/edit?html,js,output)
245+
[Try online](https://jsbin.com/yekozasoza/edit?html,js,output)
233246

234247
Note: Please make sure that all items are sorted by the group property.
235248

@@ -255,7 +268,7 @@ autocomplete({
255268
});
256269
```
257270

258-
[Try online](https://jsbin.com/cuyamokeki/edit?html,js,output)
271+
[Try online](https://jsbin.com/fololajava/edit?html,js,output)
259272

260273
## License
261274

0 commit comments

Comments
 (0)