bootstrap autocomplete

Bootstrap Autocomplete Search

Rate this article

Share this article

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.

 

Add Search to your Website

 


		
Are you showing the right products, to the right shoppers, at the right time? Contact us to know more.
You may also like