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

bootstrap autocomplete

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 CODINGbootstrap-autocomplete-search

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.

 

muthali ganesh

Muthali loves writing about emerging technologies and easy solutions for complex tech issues. You can reach out to him through chat or by raising a support ticket on the left hand side of the page.

You may also like