Author: | tomickigrzegorz |
---|---|
Views Total: | 216 views |
Official Page: | Go to website |
Last Update: | June 15, 2024 |
License: | MIT |
Preview:

Description:
A feature-rich, highly-customizable, fully accessible autocomplete library written in Vanilla JavaScript.
Features:
- Supports both Single and Multiple select.
- Supports for Asynchronous Data Fetching.
- Allows you to group results.
- Allows you to add checkboxes to the beginning of the results.
How to use it:
1. Download and import the autocomplete.css
& autocomplete.min.js
into the document.
<link rel="stylesheet" href="/path/to/autocomplete.css" /> <script src="/path/to/autocomplete.min.js"></script>
2. Load the polyfills for users who are still using the legacy browsers.
if (!('Promise' in window)) { var script = document.createElement('script'); script.src = 'https://polyfill.io/v3/polyfill.min.js?features=Promise%2CElement.prototype.closest'; document.getElementsByTagName('head')[0].appendChild(script); }
3. Initialize the autocomplete.js
on the target input field and fetch data from an external data source as follows:
<input type="text" id="example" placeholder="Type Something" />
new Autocomplete('example', { onSearch: ({ currentValue }) => { const api = `/path/to/datasource/`; return new Promise((resolve) => { fetch(api) .then((response) => response.json()) .then((data) => { resolve(data); }) .catch((error) => { console.error(error); }); }); }, onResults: ({ matches }) => { return matches .map(el => { return ` <li>${el.name}</li>`; }).join(''); } });
4. The library also supports local data.
new Autocomplete('local', { onSearch: ({ currentValue }) => { const data = [ { "name": "JavaScript" }, { "name": "CSS" }, { "name": "HTML" }, { "name": "Python" } ]; return data.sort((a, b) => a.name.localeCompare(b.name)) .filter(element => { return element.name.match(new RegExp(currentValue, 'i')) }) }, onResults: ({ matches }) => { return matches .map(el => { return ` <li>${el.name}</li>`; }).join(''); } });
5. Possible options and functions.
new Autocomplete('example', { // search delay delay: 500, // shows clear button clearButton: true, // adds a button to remove text from the input field visible on initial clearButtonOnInitial: false, // auto select the first result selectFirst: false, // adds text to the input field as you move through the results with the up/down cursors insertToInput: false, // the number of characters entered to trigger the search howManyCharacters: 1, // name of the class by which you will name the group element classGroup: 'group-by', // disable close on select disableCloseOnSelect: false, // toggle showing all values when the input is clicked, like a default dropdown showAllValuesOnClick: false, // displays all results without clicking on the input field inline: false, // prevents results from hiding after clicking on element with this class classPreventClosing: ``, // determine whether to cache characters entered in the input field cache: false, // prefix all autocomplete css class name classPrefix: 'auto-', // prevent the results from scrolling up when we have scrolling preventScrollUp: false, // delete the results when the input is empty removeResultsWhenInputIsEmpty: false, // modify string before search regex: { expression: /[\|\\{}()[\]^$+*?]/g, replacement: "\\$&" }, onResults = ({ currentValue, matches, template, classGroup }) => { }, onSearch = ({ currentValue }) => { }, onSubmit = ({ index, element, object, results }) => { }, onOpened = ({ type, element, results }) => { }, onReset = (element) => { }, onRender = ({ element, results }) => { }, onClose = () => { }, noResults = ({ element, currentValue, template }) => { }, onSelectedItem = ({ index, element, object, currentValue }) => { }, });
6. API methods:
instance.destroy(); instance.rerender(); instance.rerender(string);
Changelog:
v2.0.2 (06/15/2024)
- “showAllValues” changed name to “showAllValuesOnClick” this option will toggle showing all values when the input is clicked, like a default dropdown
- Added inline – this option displays all results without clicking on the input field
v2.0.1 (03/26/2024)
- Bugfixes
v2.0.0 (03/24/2024)
- Added removeResultsWhenInputIsEmpty – the parameter deletes the results. We use the destroy() method which removes the results from the DOM and returns everything to its original state.
- Added regex – the parameter allows you modify string before search. For example, we can remove special characters from the string. Default value is object { expression: /[|\\{}()[\]^$+*?]/g, replacement: “\\$&” }
v1.9.0 (10/05/2023)
- Added preventScrollUp – the parameter has been extended in such a way that the selected item (gray rows) is still visible after reopening the results
v1.8.8 (05/23/2023)
- Added rerender(). This method allows you to re-render the results without modifying the input field. If we pass text rerender(string); then we render the results again and also replace the text in the input field.
v1.8.6 (11/11/2022)
- clearButtonOnInitial: A parameter set to true adds a button to remove text from the input field visible on initial Autocomplete
v1.8.5 (07/02/2022)
- classPreventClosing now also works for all items as a result of searches not only in footer/header
v1.8.4 (04/12/2022)
- Fixed Reloaded site on click on enter
v1.8.3 (03/11/2022)
- Fixed Show all values
v1.8.2 (03/05/2022)
- Check input field when press arrow down
- reducing the size of the library
- all instances of innerHTML onto insertAdjacentHTML
v1.8.1 (03/03/2022)
- Fixed Issue with ‘selecFirst’ + ‘insertToInput’ + ‘cache’
v1.8.0 (03/01/2022)
- update
v1.7.5 (02/11/2022)
- added script to change library version everywhere during production build
- reducing the size of the library by mangle properties and methods
- removing duplicate method ‘setAttr’
v1.7.4 (01/21/2022)
- Added title to a clear button such as area-label
- Changed ara-label clear text from input to clear the search query
v1.7.3 (01/10/2022)
- new files for IE browsers
- IE version, refactor section width plugins
- set singleQuote to false
- Refactor
- move the configuration to rollup.config.js
v1.7.2 (12/30/2021)
- improve handing of ESC key
v1.7.1 (12/14/2021)
- Fixed: if selectFirst: true run callback function onSelect
- replace class auto-search -> auto-search-wrapper
v1.7.0 (11/19/2021)
- fixed examples
v1.6.9 (11/15/2021)
- fixed results do not scroll to the top
v1.6.8 (11/13/2021)
- global output folder dist, includes iife, umd and esm compressed and uncompressed files
v1.6.6 (11/07/2021)
- Added unminified javascript file
v1.6.5 (11/04/2021)
- Fixed typo in clear label
- Added a new parameter that allows you to insert your own aria-label for the ‘x’ button to clear data in the input field.
v1.6.4 (11/04/2021)
- Fixed: Reset margin on autocomplete ul
v1.6.3 (09/26/2021)
- documentation improvements
v1.6.1 (09/13/2021)
- Fixed: Calback function ‘onSearch’
v1.6.0 (09/04/2021)
- Added showAllValues, this option will toggle showing all values when the input is clicked, like a default dropdown
- ‘rollup.config.js’ to remove forgotten console.log and debugger
- Rebuilding html with examples so you don’t have to add js code to html manually. From now on, the code is dynamically downloaded from js as text and inserted into the appropriate place, and then presented by ‘prism’
- Bugs fixed
v1.5.0 (08/31/2021)
- Added onRender – callback function when we want to add additional elements, e.g. some buttons, links or plain text
- Added classPreventClosing – Prevents results from hiding after clicking on element with this class
- Added Footer/Header – new example, showing how to add an element above the results and below
- wrap the results of additional divs. Useful when we want to add additional elements to the results, e.g. a legend, links, buttons, etc
- fixed: following a record when navigating records up/down with arrows and when using classGroup
v1.1.4 (08/14/2021)
- fix: clearButton
v1.1.2 (08/14/2021)
- added new example
v1.1.0 (08/11/2021)
- feat: New param cache
v1.0.44 (06/30/2021)
- chore: removing unused plugin ‘rollup-plugin-postcss’