Bootstrap - AutoCompletion with DropDown


This page shows how to create a autocompletion box with the dropdown component of Bootstrap.

This is an adaptation of the autocompletion box code to the Bootstrap styling.

Color Autocompletion List


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 1) is a div box with:

  • dropdown as class on the container
  • dropdown-menu as class on the list
<div class="dropdown">
      placeholder="Type of color"
      <ul class="dropdown-menu"><!-- Build dynamically --></ul>

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 */
   /* No search term */
   /* Filtering of the data */
   let pattern = new RegExp(`.*${searchTerm}.*`,"i");
   let selectedColors = colors.filter(e=>pattern.test(e));
   if (selectedColors.length==0){
   /* 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 */
        /* We make li focusable to get on the relatedTarget it when we click  */
        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 */
             } else {
               console.log(`No input box defined, the selected value was ${this.innerText}`);

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 */

    /* 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"))){

InputBox: On value change

On change we rebuilt the list

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


The result is:

Documentation / Reference

Discover More
Color Autocompletion List
How to create an Autocompletion functionality with CSS, Javascript and HTML

This article shows you how to create a search box with an autocompletion feature

Share this page:
Follow us:
Task Runner