Javascript Search Box with Suggestions Dropdown

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.