Bootstrap - AutoCompletion with DropDown

Read the basic

You need to know the basic of an autocompletion box.

If you don't know how it works under the hood, read this article: How to create an Autocompletion functionality with CSS , Javascript and HTML ?

The box and its container

The container of dropdown box on Bootstrap ¹⁾ is a div box with:

• dropdown as class on the container
• dropdown-menu as class on the list

<div class="dropdown">
  <input 
      type="text" 
      class="form-control"
      id="color-input"
      placeholder="Type of color"
      autocomplete="off"
      >
      <ul class="dropdown-menu"><!-- Build dynamically --></ul>
</div>

The dynamic building of the list

We just reuse the function that creates the autocompletion list of the original article.

The adaptation are:

• the list item class in bootstrap is dropdown-item
• you add/remove the show class.

The code:

• The possible values that you can fetch via api

let colors = ["Blue","Red","Yellow"];

• The function that rebuild the list (listElement) with the searchTerm for the inputBox

function rebuildAutoCompletionList(searchTerm, listElement, inputBox){
   console.log(`filtering value ${searchTerm}`);
   /* Reset the content */
   listElement.innerHTML="";
   /* No search term */
   if(searchTerm==""){
      return;
   }
   /* Filtering of the data */
   let pattern = new RegExp(`.*${searchTerm}.*`,"i");
   let selectedColors = colors.filter(e=>pattern.test(e));
   if (selectedColors.length==0){
     return;
   }
   /* Creation of the bootstrap autocompletion list item */
   for(color of selectedColors){
        let li = document.createElement("li");
        /* To be able to determine that an item was clicked */
        li.classList.add("dropdown-item");
        /* We make li focusable to get on the relatedTarget it when we click  */
        li.setAttribute("tabindex","0");
        li.innerText = color;
        /* When the element is clicked, set the value of the search Box */
        li.addEventListener("click", function(){;
             if (inputBox != undefined){
                /* Set the value in the input box */
                inputBox.value = this.innerText;
                /* Remove the list */
                listElement.classList.remove("show");
             } else {
               console.log(`No input box defined, the selected value was ${this.innerText}`);
             }
        });
        listElement.append(li);
   }
}

The elements

The elements used in javascript later

• The input element

let inputBox = document.getElementById("color-input");

• The list root element (ie ul)

let completionListRoot = document.querySelector("#color-input ~ .dropdown-menu");

InputBox: On focus, on blur

• On focus, create the autocompletion list and add the show class
• On Blur, delete the show class

inputBox.addEventListener("focus", function(){

    /* on focus, create the list */
    rebuildAutoCompletionList(".*",completionListRoot,this);
    completionListRoot.classList.add("show");

    /* on blur, delete it */
    inputBox.addEventListener("blur", function(event){
        /* blur can also happen when we click on a list item, we don't remove the list in this case */
        if (event.relatedTarget == null ||
           (event.relatedTarget  !=null && !event.relatedTarget.classList.contains("dropdown-item"))){
           completionListRoot.classList.remove("show");
        }
    });
});

InputBox: On value change

On change we rebuilt the list

inputBox.addEventListener("input", function(){
    let searchTerm = this.value;
    if (this.value==""){
       searchTerm = ".*";
    }
   rebuildAutoCompletionList(searchTerm,completionListRoot,this);
});

Output

The result is: