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”.
| Option | Description, Default, Type |
|---|---|
hints | Define an array of words for suggestions/hints. Default: [], Type: Array. $('#search-form').autocomplete({ hints: ['Apple', 'Banana', 'Mango', 'Orange', 'Grips'], }); |
placeholder | Define the placeholder text for search input. Default: “Search”, Type: String. $('#search-form').autocomplete({ placeholder: "Your custom placeholder text", }); |
width & height | These are useful to define the CSS width and height property for search input. Default: width: 200, height: 16, Type: Number | String. Tip: You can also define width & height in px, em or any valid CSS value. To do so, pass the value in the string. Like: “140px” $('#search-form').autocomplete({ width: 300, height: 24, }); |
showButton | Enable/disable search button. Default: true, Type: Boolean. false to disable. $('#search-form').autocomplete({ showButton: true. }); |
buttonText | It defines the text on/for the search button. Default: “Search”, Type: String. $('#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.
