How to create Quick Search Buttons for Live Search

As you can see under Cocktails on the demo site of Live Search there are buttons next to the search box. If you click on these buttons, a keyword will be pasted to the search input, and the Live Search starting to operate. But how to make it on your site? Just read more and learn how...

First of all, if you haven't seen it in live just click on the following link: Live Search Demo Site. This feature can be useful, if you would like to help your users, to can search easily, with a few clicks on the site. You can also show the most relevant content or products by this button. Any special knowledge is not needed, only a few free seconds.

Quick Search Buttons

First steps

We will create a Custom HTML module for the quick-search-buttons, so login to your admin panel, and go to the module manager. We chose this way, because you can place your buttons in any module positions, and also can set the menu assignments easily. So just click on new button, select Custom HTML type, set the position, and click on the Custom output tab in case of Joomla 3.x, in older version the name of the tab can be different, but the working is the same.

What's next?

We will place a little sort of html code, to create the buttons. This is only a recommended html structure, it can be different, but you need to take care for the classes in the JavaScript file, what will be the next step. So, we have used this code:

There are 2 important thing in this code:

• The ids and class names of the container divs.
• The little JavaScript code on the bottom.

HTML

We will built our JS file to search for the elements only in a specific part, we have created a container div, with cocktail-chooser. This id can be what you want, but keep in mind, that we will need it later. The other important is that we have put the same class for each ingredient, to can easily create a collection of them. We have also add a data-title attribute for each div. These value will be put to the search box after you click on it. We also insert a JS file, what will contain the functionality. In our case we put it into the media folder, and called cocktail.js, but you can choose another name, if you would like.

JavaScript

On the bottom of this snippet, there is a JS code, what will call our JS class, what we will create soon, and also give a parameter to it, what is the id of the search box. You can get this id easily by check the Universal AJAX Live Search module in the module manager, and check what is its id. This will be a number in all case. If you got it, just write the search-area text and after it the id number without whitespace. In our case the module id was 92 in the module manager. Note that in the JS code, we will call the Cocktail JS class, but if you will call in another name, you need to write that name there.

Create the JavaScript file

As you can see in the first line there is the declaration of the JS class with the class name. If you have used another one in the previous part, you need to modify this, too. Note that the file name is not equal with this class name, these are different things. There are one more line, where you need to make some modification at line #6. Change the .ingredient class in the dojo.query function, if you have set another class, and also change the container div id from cocktail-chooser to your one. Note that in case of class you need to use the '.' selector, but when you enter the id of the container div, just write the id without the '#'. After these try it live, it should work properly.

Conclusion

So this is the way of creating quick search buttons. This is not so difficult, but give another fancy feature to your users according to Live Search. Note that we have used dojo framework's functions, but you can also use what you prefer. We did this, because the Live Search also built in this JS framework.