The “uniBox.js” is a pure Javascript plugin that allows you to build a powerful search box with suggestions dropdown. It works without any dependencies.
It is s a stand-alone plugin that doesn’t need jQuery to make it work. But at the same time it also compatible with jQuery so if you want, you can make it work with jQuery.
Now you can build a full-featured search box that fetches the suggestions from external URLs. It helps you to improve the search functionality on your website.
It helps you to create an AJAX ready search form that quickly loads the suggestion as the user type something in the search input field.
Furthermore, this suggestion search also allows you to show an image thumbnail with each query in the dropdown.
With the help of its powerful configuration options, you can easily customize the plugin to make it work according to your project requirements.
Additionally, with the help of CSS, you can easily customize its layout according to your site template design.
How to Create Search Box with Suggestions Dropdown
To start building an Autocomplete Search Bar with Suggestions, you need to load its Javascript and CSS files in your HTML document. You can add them before closing the head tag or in the footer.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- UniBox JS --> <script src="js/unibox.min.js"></script> <!-- UniBox CSS --> <link rel="stylesheet" href="css/unibox.min.css"/>
After that, we will create a basic HTML form for the search box with a unique id. We simply have a form element defined with an input type text and a submit button.
The input type text field only needs to add a unique ID. You can also add a class to apply your own style.
<form> <input class="s searchbox" id="searchInput" type="text" placeholder="My search..." /> <input class="btn-search" type="submit" value="search" /> </form>
The Javascript
The final step to initialize the plugin by adding the following script on your webpage. These options allow you to customize the functionality of the search bar.
<script>
var boxes = [];
sxQuery(document).ready(function() {
var settings = {
// REQUIRED
suggestUrl: 'https://global.sitesearch360.com/sites/suggest?site=fairshopping.online&limit=10&maxQuerySuggestions=50&query=', // the URL that provides the data for the suggest -> this is just an example
// suggestUrl: 'http://yourserver.com/suggests?query=', // the URL that provides the data for the suggest
ivfImagePath: 'http://yourserver.com/images/ivf/', // the base path for instant visual feedback images
// OPTIONAL
instantVisualFeedback: 'all', // where the instant visual feedback should be shown, 'top', 'bottom', 'all', or 'none', default: 'all'
throttleTime: 100, // the number of milliseconds before the suggest is triggered after finished input, default: 300ms
extraHtml: undefined, // extra HTML code that is shown in each search suggest
highlight: true, // whether matched words should be highlighted, default: true
queryVisualizationHeadline: '', // A headline for the image visualization, default: empty
animationSpeed: 200, // speed of the animations, default: 300ms
callbacks: {
enter: function(text,link){console.log('enter callback: '+text);}, // callback on what should happen when enter is pressed, default: undefined, meaning the link will be followed
enterResult: function(text,link){console.log('enter callback result: ' + text);}, // callback on what should happen when enter is pressed on a result or a suggest is clicked
},
placeholder: 'Search for something',
minChars: 3, // minimum number of characters before the suggests shows, default: 3
suggestOrder: [], // the order of the suggests
suggestSelectionOrder: [], // the order of how they should be selected
noSuggests: '<b>We haven\'t found anything for you, <u>sooorrryyy</u></b>',
emptyQuerySuggests: {
"suggests":{
"Cool Things to Check Out":[
{"id":"1","name":"Mason Jar Lid Lights","link":"https://spoonacular.com/articles/mason-jar-lid-lights","image":"https://spoonacular.com/images/articles/mason-jar-lid-lights.jpg"},
{"id":"2","name":"Spreadable Beer","link":"https://spoonacular.com/articles/spreadable-beer","image":"https://spoonacular.com/images/articles/spreadable-beer.jpg"}
],
"Products":[
{"name":"Canon PowerShot SX710 HS","image":"https://images-eu.ssl-images-amazon.com/images/I/41JNvHrzCAL._AC_SY200_.jpg","id":"2179584","link":"https://www.amazon.com/Canon-PowerShot-SX720-HS-Black/dp/B01BV14I40/"},
]
}
},
//maxWidth: 400 // the maximum width of the suggest box, default: as wide as the input box
};
// apply the settings to an input that should get the unibox
// apply to multiple boxes
boxes = sxQuery(".s").unibox(settings);
});
</script>That’s it. Let’s add this search bar to your website and enhance the search experience.
