How to add Find-As-You-Type Dropdown in WordPress Search

We’ve discussed several ways to make the WordPress search more useful. In this article we are going to show you how you can add a find-as-you-type dropdown menu using the Searchlight plugin. This extension will allow you to get instant results as you type into the search field similar to google.

First thing you need to do is install the Search Light plugin. Once you have activated it look under settings in your admin panel. You will see a button that says “Searchlight”. Clicking on this will bring you to a page where you can set everything up. First, you will notice that you can select a visual theme. You have four built in options: light, dark, clean, and lime. Those of you that are more advanced can also go into the plugin’s CSS file and make modifications there. Next, select whether you want post thumbnails to show in the results and specify the exact position where you would like the dropdown menu to appear. If you are familiar with CSS you will know that this section modifies the relative positioning. What that means is that when you put a positive number into the “top” field the dropdown will be moved that many pixels down from its previous position (offset from the top). A negative number, however, will move it up. The same goes for the “left” field. A positive number will move the dropdown to the right, and a negative number to the left.

In the next section you have the option to change the text displayed in the search results panel. Although this is intended for translation (hence the section title) you can use it to make modifications as well. After you choose how many results you want to display the last thing you have to do is make sure that the Searchform ID and Input field ID are correct. The default WordPress values are already inputted but if you are using a modified theme you may have to go into your searchform.php file to get your IDs. This is important because if the values are wrong WordPress will not know where to attach the dropdown menu.

After everything has been styled and you are done tweaking your settings, save your changes and you should see something that looks like this when you start typing into your search bar:

Download Search Light Plugin