[0] Fix | Delete

Blazing fast and lightweight autocomplete widget without dependencies. Only 1KB gzipped.

[1] Fix | Delete

[2] Fix | Delete

Demo: https://kraaden.github.io/autocomplete/

[3] Fix | Delete

[4] Fix | Delete

## Installation

[5] Fix | Delete

[6] Fix | Delete

If you want to use the library in browser, just include the `autocomplete.js` and `autocomplete.css` into your HTML file.

[7] Fix | Delete

[8] Fix | Delete

For `node.js`:

[9] Fix | Delete

[10] Fix | Delete

```console

[11] Fix | Delete

npm install autocompleter

[12] Fix | Delete

```

[13] Fix | Delete

[14] Fix | Delete

Then import it into your javascript code:

[15] Fix | Delete

[16] Fix | Delete

```javascript

[17] Fix | Delete

import autocomplete from 'autocompleter';

[18] Fix | Delete

// or

[19] Fix | Delete

var autocomplete = require('autocompleter');

[20] Fix | Delete

```

[21] Fix | Delete

[22] Fix | Delete

## Getting Started

[23] Fix | Delete

[24] Fix | Delete

```javascript

[25] Fix | Delete

var countries = [

[26] Fix | Delete

{ label: 'United Kingdom', value: 'UK' },

[27] Fix | Delete

{ label: 'United States', value: 'US' }

[28] Fix | Delete

];

[29] Fix | Delete

[30] Fix | Delete

var input = document.getElementById("country");

[31] Fix | Delete

[32] Fix | Delete

autocomplete({

[33] Fix | Delete

input: input,

[34] Fix | Delete

fetch: function(text, update) {

[35] Fix | Delete

text = text.toLowerCase();

[36] Fix | Delete

// you can also use AJAX requests instead of preloaded data

[37] Fix | Delete

var suggestions = countries.filter(n => n.label.toLowerCase().startsWith(text))

[38] Fix | Delete

update(suggestions);

[39] Fix | Delete

},

[40] Fix | Delete

onSelect: function(item) {

[41] Fix | Delete

input.value = item.label;

[42] Fix | Delete

}

[43] Fix | Delete

});

[44] Fix | Delete

```

[45] Fix | Delete

[46] Fix | Delete

[Try online](https://jsbin.com/gocayupedo/edit?html,js,output)

[47] Fix | Delete

[48] Fix | Delete

## Use with Typescript and Webpack

[49] Fix | Delete

[50] Fix | Delete

Simply import the autocompleter in your typescript file:

[51] Fix | Delete

[52] Fix | Delete

```javascript

[53] Fix | Delete

import autocomplete from "autocompleter";

[54] Fix | Delete

```

[55] Fix | Delete

[56] Fix | Delete

and call the `autocomplete` function as showed below:

[57] Fix | Delete

[58] Fix | Delete

```javascript

[59] Fix | Delete

// replace the `Client` interface with the interface you want to use with autocomplete

[60] Fix | Delete

autocomplete<Client>({

[61] Fix | Delete

input: document.getElementById("myinputfield"),

[62] Fix | Delete

emptyMsg: "No items found",

[63] Fix | Delete

minLength: 1,

[64] Fix | Delete

fetch: (text: string, update: (items: Client[]) => void) => {

[65] Fix | Delete

...

[66] Fix | Delete

},

[67] Fix | Delete

onSelect: (item: Client) => {

[68] Fix | Delete

...

[69] Fix | Delete

}

[70] Fix | Delete

});

[71] Fix | Delete

```

[72] Fix | Delete

[73] Fix | Delete

If your custom interface doesn't have the `label` property, you might get a compilation error from typescript. In this case just add an additional type to your code and pass it to the autocompleter:

[74] Fix | Delete

[75] Fix | Delete

```javascript

[76] Fix | Delete

import autocomplete, { AutocompleteItem } from "autocompleter";

[77] Fix | Delete

[78] Fix | Delete

// this type will prevent typescript warnings

[79] Fix | Delete

type AutocompleteClient = Client & AutocompleteItem;

[80] Fix | Delete

[81] Fix | Delete

autocomplete<AutocompleteClient>({

[82] Fix | Delete

input: document.getElementById("myinputfield"),

[83] Fix | Delete

emptyMsg: "No items found",

[84] Fix | Delete

minLength: 1,

[85] Fix | Delete

fetch: (text: string, update: (items: Client[]) => void) => {

[86] Fix | Delete

...

[87] Fix | Delete

},

[88] Fix | Delete

onSelect: (item: Client) => {

[89] Fix | Delete

...

[90] Fix | Delete

},

[91] Fix | Delete

render: function(item: Client, currentValue: string): HTMLDivElement | undefined {

[92] Fix | Delete

const itemElement = document.createElement("div");

[93] Fix | Delete

itemElement.textContent = item.FirstName;

[94] Fix | Delete

return itemElement;

[95] Fix | Delete

}

[96] Fix | Delete

});

[97] Fix | Delete

```

[98] Fix | Delete

[99] Fix | Delete

If your interface doesn't have a `label` property, you also have to provide a custom render function.

[100] Fix | Delete

[101] Fix | Delete

## Options

[102] Fix | Delete

[103] Fix | Delete

You can pass the following options to `autocomplete`:

[104] Fix | Delete

[105] Fix | Delete

| Parameter | Description | Default |

[106] Fix | Delete

| --------- | ----------- | ------- |

[107] Fix | Delete

|`onSelect`|This method will be called when user choose an item in autocomplete. The selected item will be passed as first parameter.|`-`|

[108] Fix | Delete

|`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.|`-`|

[109] Fix | Delete

|`minLength`|Specify the minimum length, when autocomplete should appear on the screen.|`2`|

[110] Fix | Delete

|`emptyMsg`|The message that will be showed when there are no suggestions that match the entered value.|`undefined`|

[111] Fix | Delete

|`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`|

[112] Fix | Delete

|`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`|

[113] Fix | Delete

|`className`|The autocomplete container will have this class name if specified.|`undefined`|

[114] Fix | Delete

|`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.|`-`|

[115] Fix | Delete

|`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`|

[116] Fix | Delete

|`customize`|Callback for additional autocomplete customization after rendering is finished. Use this function if you want to change autocomplete default position.|`undefined`|

[117] Fix | Delete

|`preventSubmit`|Prevents automatic form submit when ENTER is pressed.|`false`|

[118] Fix | Delete

[119] Fix | Delete

### Sample config using all options

[120] Fix | Delete

[121] Fix | Delete

```javascript

[122] Fix | Delete

autocomplete({

[123] Fix | Delete

onSelect: function(item) {

[124] Fix | Delete

alert(item.value);

[125] Fix | Delete

},

[126] Fix | Delete

input: document.getElementById('myinput'),

[127] Fix | Delete

minLength: 2,

[128] Fix | Delete

emptyMsg: 'No elements found',

[129] Fix | Delete

render: function(item, currentValue) {

[130] Fix | Delete

var div = doc.createElement("div");

[131] Fix | Delete

div.textContent = item.label;

[132] Fix | Delete

return div;

[133] Fix | Delete

},

[134] Fix | Delete

renderGroup: function(groupName, currentValue) {

[135] Fix | Delete

var div = doc.createElement("div");

[136] Fix | Delete

div.textContent = groupName;

[137] Fix | Delete

return div;

[138] Fix | Delete

},

[139] Fix | Delete

className: 'autocomplete-customizations',

[140] Fix | Delete

fetch: function(text, callback) {

[141] Fix | Delete

text = text.toLowerCase();

[142] Fix | Delete

var suggestions = [{ label: "United States", value: "US" }];

[143] Fix | Delete

callback(suggestions);

[144] Fix | Delete

},

[145] Fix | Delete

debounceWaitMs: 200,

[146] Fix | Delete

customize: function(input, inputRect, container, maxHeight) {

[147] Fix | Delete

...

[148] Fix | Delete

},

[149] Fix | Delete

preventSubmit: true

[150] Fix | Delete

});

[151] Fix | Delete

```

[152] Fix | Delete

[153] Fix | Delete

### Display autocomplete above the input field

[154] Fix | Delete

[155] Fix | Delete

You can use the following snippet to display autocomplete above the input field if there is not enough space for it.

[156] Fix | Delete

[157] Fix | Delete

```typescript

[158] Fix | Delete

autocomplete({

[159] Fix | Delete

...,

[160] Fix | Delete

customize: function(input, inputRect, container, maxHeight) {

[161] Fix | Delete

if (maxHeight < 100) {

[162] Fix | Delete

container.style.top = "";

[163] Fix | Delete

container.style.bottom = (window.innerHeight - inputRect.bottom + input.offsetHeight) + "px";

[164] Fix | Delete

container.style.maxHeight = "200px";

[165] Fix | Delete

}

[166] Fix | Delete

}

[167] Fix | Delete

});

[168] Fix | Delete

```

[169] Fix | Delete

[170] Fix | Delete

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:

[171] Fix | Delete

[172] Fix | Delete

```typescript

[173] Fix | Delete

export default function autocompleteCustomized<T extends AutocompleteItem>(settings: AutocompleteSettings<T>): AutocompleteResult {

[174] Fix | Delete

return autocomplete({

[175] Fix | Delete

...settings,

[176] Fix | Delete

customize: (input: HTMLInputElement, inputRect: ClientRect | DOMRect, container: HTMLDivElement, maxHeight: number): void => {

[177] Fix | Delete

if (maxHeight < 100) {

[178] Fix | Delete

container.style.top = "";

[179] Fix | Delete

container.style.bottom = (window.innerHeight - inputRect.bottom + input.offsetHeight) + "px";

[180] Fix | Delete

container.style.maxHeight = "200px";

[181] Fix | Delete

}

[182] Fix | Delete

}

[183] Fix | Delete

});

[184] Fix | Delete

}

[185] Fix | Delete

```

[186] Fix | Delete

[187] Fix | Delete

### Unload autocomplete

[188] Fix | Delete

[189] Fix | Delete

You can call `destroy` method on the returned object in order to remove event handlers and DOM elements after usage:

[190] Fix | Delete

[191] Fix | Delete

```javascript

[192] Fix | Delete

var autocompl = autocomplete({ /* options */ });

[193] Fix | Delete

autocompl.destroy();

[194] Fix | Delete

```

[195] Fix | Delete

[196] Fix | Delete

## Grouping suggestions

[197] Fix | Delete

[198] Fix | Delete

You can display suggestions separated into one or multiple groups/categories:

[199] Fix | Delete

[200] Fix | Delete

```javascript

[201] Fix | Delete

var countries = [

[202] Fix | Delete

{ label: 'Canada', value: 'CA', group: 'North America' },

[203] Fix | Delete

{ label: 'United States', value: 'US', group: 'North America' },

[204] Fix | Delete

{ label: 'Uzbekistan', value: 'UZ', group: 'Asia' },

[205] Fix | Delete

];

[206] Fix | Delete

[207] Fix | Delete

autocomplete({

[208] Fix | Delete

minLength: 1,

[209] Fix | Delete

input: document.getElementById("country"),

[210] Fix | Delete

fetch: function(text, update) {

[211] Fix | Delete

text = text.toLowerCase();

[212] Fix | Delete

var suggestions = countries.filter(n => n.label.toLowerCase().startsWith(text))

[213] Fix | Delete

update(suggestions);

[214] Fix | Delete

},

[215] Fix | Delete

onSelect: function(item) {

[216] Fix | Delete

alert(item.value);

[217] Fix | Delete

}

[218] Fix | Delete

});

[219] Fix | Delete

```

[220] Fix | Delete

[221] Fix | Delete

[Try online](http://jsbin.com/sodicopeya/1/edit?html,js,output)

[222] Fix | Delete

[223] Fix | Delete

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

[224] Fix | Delete

[225] Fix | Delete

## License

[226] Fix | Delete

[227] Fix | Delete

Autocomplete is released under the MIT License.

[228] Fix | Delete

[229] Fix | Delete

Copyright (c) 2016 - Denys Krasnoshchok

[230] Fix | Delete

[231] Fix | Delete

Permission is hereby granted, free of charge, to any person obtaining a copy

[232] Fix | Delete

of this software and associated documentation files (the "Software"), to deal

[233] Fix | Delete

in the Software without restriction, including without limitation the rights

[234] Fix | Delete

to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

[235] Fix | Delete

copies of the Software, and to permit persons to whom the Software is

[236] Fix | Delete

furnished to do so, subject to the following conditions:

[237] Fix | Delete

[238] Fix | Delete

The above copyright notice and this permission notice shall be included in

[239] Fix | Delete

all copies or substantial portions of the Software.

[240] Fix | Delete

[241] Fix | Delete

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

[242] Fix | Delete

IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

[243] Fix | Delete

FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

[244] Fix | Delete

AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

[245] Fix | Delete

LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

[246] Fix | Delete

OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

[247] Fix | Delete

THE SOFTWARE.

[248] Fix | Delete

[249] Fix | Delete