Knowledge Base

As you might have seen on the demo, there are keywords under the search bar, which can trigger the search:

Solution 1. – Recent search version (4.5+)

This feature has been incorporated to the plugin, under the Autocomplete & Suggestions -> Suggested search keywords panel.

Solution 2. – before version 4.5

The code consists of 3 things: The HTML structure, the CSS code for styling and the Javascript code for the functionality. You can copy/paste the following code right under your search engine:

<!-- This is the HTML part -->
<p class="asp-try">Try: <a>keyword 1</a>,<a>keyword 2</a>,<a>keyword 3</a>,<a>keyword 4</a></p>

<!-- This is the script -->
<script>
jQuery(document).ready(function ($) {
  $('.asp-try a').on('click', function(){
    var $searchParent = $(this).parent().prev();
    var i = 1;
    while (typeof $searchParent.attr('id') == "undefined"
            || $searchParent.attr('id').indexOf('searchpro') == -1
            || $searchParent.attr('id').indexOf('searchprores') != -1) {
        if (i>15) break;
        $searchParent = $searchParent.prev();
        i++;
    }
    $('input', $searchParent).val('');
    $('input.orig', $searchParent).val($(this).html()).keydown();
    $('div.promagnifier', $searchParent).click();
  });
});
</script>

<!-- And this is the styling -->
<style>
p.asp-try {
  color: #555;
  font-size: 14px;
  margin-top: 5px;
  line-height: 28px;
  font-weight: 300;
}

p.asp-try a {
  color: #FFB556;
  margin-left: 10px;
  cursor: pointer;
}
</style>

Result

Try: keyword 1,keyword 2,keyword 3,keyword 4