Magento - Autocomplete Suggest Search Not Working

Question

I have incorporated a new theme in Magento v1.4.2.0, and have completed all the necessary changes, but only following true Magento way of overriding the Magento modules & methods.

My only problem is that the auto complete suggest search functionality in the front-end is not working at all. The AJAX is running as I can view the calls in "Firebug" (with the status showing as "200 OK"), but the search result dropdown isn’t coming.

Some more info:

• Checked the method of the form and it is set as "get".
• Name of the text field in the "form.mini.phtml" is "q".
• Checked both the Log Files (exception.log & system.log), but nothing is printed here regarding auto complete search.
• Checked the settings of Minimal Query Length (from "System > Configuration > Catalog > Catalog Search > Minimal Query Length") and it is set to "1".
• Incorporated all the HTML in the "form.mini.phtml" page as precisely as possible, along with including all the required JS files without any errors in them. As a result, the Firebug is reporting the blank / NULL AJAX responses, without any errors.

---

Edit:-
I am also getting another problem. Say I have 4 products, each starting with a name "Test". Also let's assume that the name of these 4 Products are "Test 1", "Test 2", "Test 3", "Test 4".
Now if I do a simple search with query "Test", in the router "catalogsearch/index", then result is showing that there are 4 Products available, which is correct. But if I do a search with query as "Test 1", then no results are showing, which is very much weird.

Also I am using "jQuery", with no conflict condition. However, there are also 6 plugins of "jQuery", all of which are not following the no conflict condition perfectly. This is because the code in some of those plugins are huge, & it is impossible for me to change each & every "$" sign to "jQuery", making it no conflict compatible. Can anybody suggest for this sort of problem too? And whether it is affecting the Auto Suggest Search in any way?

Answer 1

It sounds as though there is an issue with the way that the server is responding to the AJAX calls rather than a problem with the form or the javascript. I would suggest that you need to debug a couple of key areas.

Ideally, you would debug this with Xdebug on your Apache hooked into your IDE (Netbeans, Eclipse, other). My personal preference/setup is Netbeans, but others will work fine. If you can't use live debugging, you can insert print_r/echo statements through the code blocks and trace the call that way.

1. Mage_CatalogSearch_AjaxController

The javascript on form.mini.phtml should be sending the request to Mage_CatalogSearch_AjaxController and the suggestAction. Set breakpoints/trace messages either side of the first if statement in this method.

If the breakpoint/trace doesn't get hit, try manually hitting the action by putting http://hostname/catalogsearch/ajax/suggest?q=query in your browser address bar.

If that doesn't work, there's something broken with the config of the catalogsearch module, probably to do with the <frontname><routers> section. Use Alan Storm's Configviewer or CommerceBug modules to debug that.

2. Mage_CatalogSearch_Block_Autocomplete

The AjaxController creates an instance of Mage_CatalogSearch_Block_Autocomplete which does the actual query. Set a breakpoint/trace just before $suggestData = $this->getSuggestData(); to check that the Block is getting instantiated.

After that line, the block calls it's own getSuggestData() method. Continue to trace through the code to see where the error occurs.

3. Mage_CatalogSearch_Model_Query::getSuggestCollection()

The Block calls this method to retrieve the values that match the q param, in particular the setQueryFilter() method which inserts the param into the SQL query criteria. Again, trace through here to find the error.

I can't emphasize enough how much easier you will find this (and most Magento issues) when you're using live debugging in your IDE. Have a read of my answer here if you want tips on this process.

Make sure that you have the server in Developer Mode to output as many errors as possible.

Answer 2

Please check one time, that you search after a word, you know, that the product is existing. If it cannot be shown then, press enter and you will be send to result view. After that test, if you can find the article now in suggest search.

Answer 3

If you view the source of a working site (view-source:http://demo.magentocommerce.com/) you should find the search form looks like this:

<div class="form-search">
    <label for="search">Search:</label>
    <input id="search" type="text" name="q" value="" class="input-text" />
    <button type="submit" title="Search" class="button"><span><span>Search</span></span></button>
    <div id="search_autocomplete" class="search-autocomplete"></div>
    <script type="text/javascript">
    //<![CDATA[
        var searchForm = new Varien.searchForm('search_mini_form', 'search', 'Search entire store here...');
        searchForm.initAutocomplete('http://demo.magentocommerce.com/catalogsearch/ajax/suggest/', 'search_autocomplete');
    //]]>
    </script>
</div>

The important part seems to be an element called search_autocomplete and it's ID is passed to searchForm.initAutocomplete(). Also make sure your new theme includes prototype.js and the files from js/varien/ and doesn't have any other Javascript errors.