how to show products with category filter in header search

Question

I am trying to display category based auto suggest results in header search,

form.mini.phtml

<form id="search_mini_form" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">   
     <select id="select-category" title="Select your category" name="cat">
        <option value="0" selected>Select category</option>
        <?php
           foreach ($categoryCollection as $category) { ?>
            <option value="<?php echo $category->getId(); ?>"><?php echo $category->getName(); ?></option>
         <?php } ?>
     </select>
     <div class="input-box">
        <label for="search"><?php echo $this->__('Search:') ?></label>
        <input id="search" type="search" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText() ?>" class="input-text required-entry" maxlength="<?php echo $catalogSearchHelper->getMaxQueryLength();?>" placeholder="<?php echo $this->__('Search entire store here...') ?>" />
         <button type="submit" title="<?php echo $this->__('Search') ?>" class="button search-button"><span><span><?php echo $this->__('Search') ?></span></span></button>
    </div>    
    <div id="search_autocomplete" class="search-autocomplete"></div>
    <script type="text/javascript">
      //<![CDATA[
         var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
         searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');
        //]]>
   </script>
</form>

In this Form, When I type in input box ajax request passed like

http://127.0.0.1/site/catalogsearch/ajax/suggest/?q=bla

but selected cat value not include in this url, How can I include Cat="bla" in ajax/suggest url like http://127.0.0.1/site/catalogsearch/ajax/suggest/?q=bla&cat=bla

Answer 1

Replace this code in your form.mini.phtml script section,

searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl()?>?cat='+jQuery('#select-category :selected').val(), 'search_autocomplete');

But the url will look like the below one

http://127.0.0.1/site/catalogsearch/ajax/suggest/?cat=2&q=dddaa

It worked for me. Try it and let me know if it works for you.

Answer 2

I reckon there is two ways of doing it:

You can either modify/extend the searchForm class under /js/varien/form.js to handle several fields and thus, handle your the request differently than the default system.

Or you can use the advanced search instead, where you can pass attributes to the URL but you will have to tweak the code to get suggestions with this method.

In both cases, you will have to make code modifications.

Answer 3

You need to find ajax code and pass "cat" parameter to it.and in suggest action you need to filter collection on giver "cat" param.