autocompleteBS (alpha)
A Javascript autocomplete library for Bootstrap.
Description
The intention of this library is to make it easier add autocomplete functionality for webdev projects. To date not a lot of effort has been made to make the library cross browser compatible but it does use Vanilla JS to remove any dependencies on other JavaScript libraries. Any use of bootstrap is optional.
Demo: Lookups by Capital or Country
Features
- Simple configuration to add autocomplete function to an input field
- Allow multiple autocompletes on the page, and the ability to add additional post document load
- Configurable Debounce, Min Input Length and Max Results to display per input
- Keyboard controls to navigate list (Up, Down, Tabbing, Escape and Enter to Select)
- Source autocomplete data from an external API
- Assume the source will supply additional properties that can be used in a result handle callback function
To Do List
- Filtering of results that come back raw, eg JSON lists of countries
- More configration options, eg own search/regex functions
- Static lists without the use of Fetch
- Cross browser testing
- A lot more testing and error handling!
Installation
- The easiest thing to do right now is to check out the demo
- Installation typically involves configuring an object as in the example and then pass this to the function autocompleteBS()
- The results will display under the parent element that has the class autocompleteBS so that there is a placeholder for results to be inserted
- Using the demo is pretty self explanatory and self contained
- See sample JS code here: Demo JS
Contributions
I am happy to consider any and all contributions that support the stated features. The intention is for this repo to be used in modern browsers and I'm naturally keen to learn better ways to do the things that are accomplished already. The only rule I have is to no shared libraries as this is intended to be completely stand-alone. One of the reasons I made this was many other examples introduce dependencies that I found were often out of date.
Feedback
I am not a professional developer by anyone's calculation, so if you have feedback or suggestions of areas of improvement please just raise an issue and I will help where I can. If anyone wishes to help collaborate just let me know.
Text wrapped in a b or span is not clickable
If the dropdown contains HTML tags such as a
B
tag orSPAN
tag etc then it is impossible to click on theB
tag to get the list to fire the callback.https://github.com/kanine/autocompleteBS/blob/6d09c786689684c3f121f2f691f1d5c00bd931ae/js/autocompleteBS.js#L80-L82
A quick fix to this would be to check that if the
e.target
is not adiv
then get thr parent. e.g.Handle ENTER key like tab on active list
Currently when hitting enter on an active list an error is thrown as the active id is not set yet. Instead when an active list is available make the ENTER key work like a TAB/KEYDOWN so it moves to the first entry.
If the the list has no entries, do nothing.
Done: https://github.com/kanine/autocompleteBS/commit/aa90191f63b48c3c5958436feb85e5810495c6d2
enter key on callback is incorrect
When hitting enter key to select an item the callback logic is incorrect
I think these lines are wrong
https://github.com/kanine/autocompleteBS/blob/6d09c786689684c3f121f2f691f1d5c00bd931ae/js/autocompleteBS.js#L190-L192
and should be replaced with
Changed to class, more generic behaviour
Hello, thank you for your great work! I've modified this little bit to be able to use it in more generic way. I don't have time for writing documentation for each function, but I've added example and I think code is self-documenting : )
Call resultHandler when Input Field is blanked
If the autocomplete source is blanked (eg pressing ESC on an active list) then call the result handler so that any customer post-autocomplete tasks can be executed such as clearing dependencies, validations, disabling other inputs etc.
Add ajax query option in
Hi Kanine,
I use your demo and I added options/functions in your configuration file :
Let me know if I can contribute to your repo
Type ahead for first entry of list
Show in the input the entire field completed like a pre-fill in a lighter font-weight.
When the user press right on the keyboard (or swipe right on mobile) make the selection based on the top entry.