A flexible and customisable autocomplete/typeahead library for you to use in your projects or use as a learning resource.
- Lightweight & Responsive
- Typescript
- Works with any api response
- Provide your own callbacks to work with your application functionality
Options and usage notes
| Description | Type | |
|---|---|---|
| el | The autocomplete DOM element | HTMLElement |
| url | The endpoint to call to get the results, {value} token is replaced with search string | String |
| titleKey | Gets the item title value from your results object, uses lodash get to reach deep into the object if required | String |
| textKey | Gets the primary item text value from your results object, uses lodash get to reach deep into the object if required | String |
| handleResponse | Your function to return the autocomplete results array from the api response | Function |
| onSelect | Your function to perform a custom action when an autocomplete item is selected, gets passed the entire item object as an argument | Function |
| minimumLength | The minimum query length before api called | Number |
importAutocompletefrom"./autocomplete";constautocomplete=document.querySelectorAll<HTMLElement>(`.autocomplete`);autocomplete.forEach(el=>{constoptions={
el,// https://restcountries.com/// the url of your endpointurl: "https://restcountries.com/v3.1/name/{value}",// how to handle the api response to return the results arrayhandleResponse: (response)=>{returnresponse;},// handle item selection however you wantonSelect: (data)=>{console.log(data);},// https://lodash.com/docs/4.17.15#get// Gets the dropdown values at path of your item objecttitleKey: "name.common",textKey: "region"};constac=newAutocomplete(options)ac.bind();})