Autosearch is not working

Question

default magento search work using hit enter key or submit button.but now i need this search work only for pressing submit button and not work for hit enter key.For this am added the below js code in form.mini.phtml file

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#search_mini_form").bind("keypress", function(e) {
            if (e.keyCode == 13) {
                return false;
            }
        });
    });
</script>

but this code is not working when there is the code for autocomplete

//<![CDATA[
        var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
        searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');
    //]]>

By removing this autocomplete code the above code works correctly.But i need both codes work correctly(i need autocomplete property also).I am using magento 1.9.2.0

Answer 1

I have checked it on my local machine and its working with both the code. Please use below code.

<script type="text/javascript">
//<![CDATA[
    var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
    searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');
    jQuery(document).ready(function() {
        jQuery("#search_mini_form").bind("keypress", function(e) {
            if (e.keyCode == 13) {
                return false;
            }
        });
    });
//]]>
</script>

It disables the enter key press and also keeps default autocomplete functionality working.

UPDATES

I have checked the issue and found below. the function initAutocomplete is defined in js/varien/js.js file. which is like below.

initAutocomplete : function(url, destinationElement){
    new Ajax.Autocompleter(
        this.field,
        destinationElement,
        url,
        {
            paramName: this.field.name,
            method: 'get',
            minChars: 2,
            updateElement: this._selectAutocompleteItem.bind(this),
            onShow : function(element, update) {
                if(!update.style.position || update.style.position=='absolute') {
                    update.style.position = 'absolute';
                    Position.clone(element, update, {
                        setHeight: false,
                        offsetTop: element.offsetHeight
                    });
                }
                Effect.Appear(update,{duration:0});
            }

        }
    );
}

This function makes a call to _selectAutocompleteItem function which is also defined in the same file,

_selectAutocompleteItem : function(element){
    if(element.title){
        this.field.value = element.title;
    }
    this.form.submit();
}

Here, you can find code this.form.submit(); which is responsible for form submission. If you comment out the code like,

_selectAutocompleteItem : function(element){
    if(element.title){
        this.field.value = element.title;
    }
    //this.form.submit();
}

It will work as per your requirements. I can't find a way to override the _selectAutocompleteItem function.