jQuery Autocomplete Search Bar with Suggestions

The “Autocomplete” is a search bar jQuery plugin which gives suggestions when the user starts typing the text in the input text field. It helps to create a powerful search bar.

It improves your site search with hints for greater user experience. The plugin well designed and offer multiple features. It’s a cross-browser compatible plugin which builds with jQuery.

When you type the text in the field it will show a dropdown with the suggestion to choose the correct word.

Every website or mobile app must have a search bar which allows users to easily the topic they are looking for. It’s the most important part of any website.

Let’s take an example of a Twitter search. If you want to search a persona or a hashtag, you start to type in the search input type field and you will start seeing the suggestion in an overlay list.

Similar, the best example is Google search. As you start writing your query, it gives you suggestions which we can choose from. As we select the desired option, the selected text is displayed in the text field.

How to Make jQuery Autocomplete Search Bar

The plugin allows you to set the words as an array for the suggestion that you want to display as search hints. After that, the plugin will automatically start to suggest the base of the different word on input event.

In addition, the plugin easy to customize through the configuration option. You can customize it according to your requirements.

Get started by loading the jQuery JavaScript library and Autocomplete plugin’s CSS and JS file into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Autocomplete JS -->
<script src="js/autocomplete.js"></script>

<!-- Autocomplete CSS -->
<link rel="stylesheet" href="css/autocomplete.min.css">

After that, simply create a div element with a unique ID. In our case, we have an id search-form. The wrapper isn’t necessary.

<div class="wrapper">
   <div id="search-form"></div>
</div>

Initialize the plugin using the document ready jQuery function and define the list of suggestion words.

$(document).ready(function(){

var suggestions = ['Apple', 'Banana', 'Mango', 'Orange', 'Grips'];

   $('#search-form').autocomplete({
      hints: suggestions 
   });

});

Configuration Options for Suggestions Search Bar

The following are some advanced configuration options to create/customize “jQuery search bar with suggestions”.

$('#search-form').autocomplete({
   hints: ['Apple', 'Banana', 'Mango', 'Orange', 'Grips'],
});

$('#search-form').autocomplete({
   placeholder: "Your custom placeholder text",
});

$('#search-form').autocomplete({
   width: 300,
   height: 24,
});

$('#search-form').autocomplete({
   showButton: true.
});

$('#search-form').autocomplete({
   buttonText: "Custom Text",
});

Autocomplete JS Callback Functions

The following are two callback functions to execute on different search (input) events.

1. Function to trigger on search submit.

$('#search-form').autocomplete({
   onSubmit: function(){
     
	  //Code to execute
   
   },
});

3. Function to trigger input blur.

$('#search-form').autocomplete({
   onBlur: function(){
     
	 //Code to execute
   
   },
});

That’s It. It’s quite simple to add the plugin into your website and customize it through options.