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.

That’s it. Let’s add this search bar to your website and enhance the search experience.