Autocomplete functionality for input fields in Vanilla Javascript based on Bootstrap classes

  • By null
  • Last update: Jun 13, 2022
  • Comments: 2

bs5-autocomplete-vanillaJS

Because Bootstrap no longer depends on jquery here is a simmple and small but powerful alternative to auto-complete the search string in an bootstrap based .

Advantages:

  • simple array with possible results is needed only
  • optinal choosing after how many inputed characters the results list is visible / default = 3
  • optional parameter, how long the result is max / default = 5
  • width and the font size of every result refers to the input field / more depending style components could be added in the script easily
  • search string in reullts are colored

Handling: see also my example

  1. Create a input field with BS5 standard class="form-control".
  2. The inout field needs an ID which is used in the function.
  3. Directly below the input field create a div with bootsrap based class="position-absolute invisible" and an ID.
  4. Download and nclude the file "autocomplete.js".
  5. Create a variable wich includes an array with possible results as strings.
  6. Call the function 'set_autocomplete' with params:
    • ID of input field as string without '#'
    • ID of div which should includes the results as string without '#'
    • variable name which includes the array with possible results
    • optional param "start_at_letters= " (default=3)
    • optional param "count_results= " (default=5)

Preview

Github

https://github.com/Denglo/bs5-autocomplete-vanillaJS

Comments(2)

  • 1

    no way to add external data source.. so ..

    I add

    field.addEventListener('keyup', (e) => {
    if (e.keyCode != 27 && e.keyCode != 40 && this.options.source != "") {
        var obj = this; //keep reference;
        $.get(this.options.source + $(this.field).val())
            .done(function (response) {
                obj.setData(response);
            });

      }
});

    to your constructor class.

  • 2

    No cancel event

    when you select one item and then suddenly change text click into another object in screen autocomplete input lost focus but cancel event is not fired. so it keeps last value selected event..

Popular Tag

Related