A Javascript autocomplete library for Bootstrap.

  • By null
  • Last update: Dec 22, 2022
  • Comments: 7

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.

Github

https://github.com/kanine/autocompleteBS

Comments(7)

  • 1

    Text wrapped in a b or span is not clickable

    If the dropdown contains HTML tags such as a B tag or SPAN tag etc then it is impossible to click on the B 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 a div then get thr parent. e.g.

    let selectedElement = e.target;
//Fix if user clicks the `b` tag etc
//console.log(e.target.localName);
if (e.target.localName !== "div")
    selectedElement = e.target.parentElement;

    2022-04-21_10-17-37

  • 2

    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

  • 3

    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

    if (config.callback && typeof config.callback === "function") {
   config.callback(config.name, results[currentPosition - 1]);
}
  • 4

    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 : )

  • 5

    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.

  • 6

    Add ajax query option in

    Hi Kanine,

    I use your demo and I added options/functions in your configuration file :

    • ajax (boolean) : to allows ajax query instead of API
    • bold (boolean) : to display searched characters in bold

    Let me know if I can contribute to your repo

    Capture

  • 7

    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.

Popular Tag

Related