Bootstrap Autocomplete Search

In this article, we will see how to create a bootstrap autocomplete. The Bootstrap Autocomplete component predicts the words being typed based on the first few letters given by the user. You can search the list using basic scroll and the keyboard arrows

A basic example of Bootstrap Autocomplete search

With our component you can easily add to autocomplete menu what you want.

You only need to add arrays in JavaScript with your variable and you have to initiate that variable with our JavaScript code.

For example:

BOOTSTRAP AUTOCOMPLETE SEARCH HTML

<div class="md-form">
  <input type="search" id="form-autocomplete" class="form-control mdb-autocomplete">
  <button class="mdb-autocomplete-clear">
    <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
      <path d="M0 0h24v24H0z" fill="none" />
    </svg>
  </button>
  <label for="form-autocomplete" class="active">What is your favorite US state?</label>
</div>

Bootstrap Autocomplete search Javascript

var states = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illnois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
];

$(‘#form-autocomplete’).mdbAutocomplete({
data: states
});

BOOTSTRAP AUTOCOMPLETE WITHOUT CODING

You can also skip all the steps above and simply create a semantic search engine using expertrec.

1. Go to Bootstrap autocomplete search creator.
2. Sign in with your Gmail ID.
3. Add your website URL.
4. Wait for the crawl to complete.
5. By now the search results UI will be ready ( you can check out the demo).
6. Go to Search settings-> Semantic search – Enable it.

Add Search to your Website