How to create Quick Search Buttons for Live Search?

Introduction

As you can see under Cocktails on the demo site of Live Search there are buttons next to the search box. You can check it here. If you click on these buttons, a keyword will be pasted to the search input, and the Live Search starting to operate. 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.

Result module of Minimal Theme
Quick search button for AJAX Live Search

Create Steps

You should 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.

You should 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:

<div id="cocktail-chooser">
 <div class="ingredient mint" data-title="mint"><div class="fruit"></div></div>
 <div class="ingredient orange" data-title="orange"><div class="fruit"></div></div>
 <div class="ingredient peach" data-title="peach"><div class="fruit"></div></div>
 <div class="ingredient strawberry" data-title="strawberry"><div class="fruit"></div></div>
 <div class="ingredient lime" data-title="lime"><div class="fruit"></div></div>
 <div class="ingredient melon" data-title="melon"><div class="fruit"></div></div>
</div>
<script type="text/javascript">
 jQuery(document).ready(function($){
  $('.ingredient').on('click',function(){
   var keyword = $(this).data('title');
   setTimeout(function(){
    $('#search-area301').val(keyword);
    document.search.type(null,1);
   });
  });
 });
</script>

There are 3 important thing in this code:

  • The ids and class names of the container divs.
  • The little JavaScript code on the bottom.
  • The #search-area301 selector is contain the Universal AJAX Live Search module ID.

That's all, now check the result on your frontend.