Question

I have a field “accountname” that uses Jquery autosuggest in a textbox. Here as the user selects from the autosuggestion values and press “Enter Key” to fill with the selected value.
Currently i have mapped “Enter Key” to submit the form using “Jquery hot keys” plugin.

problem is, as soon as the user selects value from autosuggest, if he presses “Enter” to select. form is getting submitted. I dont want to submit the form, when the user presses enterkey in autosuggest dropdown. But should submit the form when the focus is on autosuggest field.

Which function needs to be overridden?

Here is my Snippet:

$(document).ready(function() {  
         var availableTags = [
            // abbreviations                  
            {"label":"academy - acad","value":"acad"},{"label":"accident - acc","value":"acc"},{"label":"account - acct","value":"acct"}];

    function split( val ) {
        return val.split(/\s\s*/ );
    }

    function extractLast( term ) {
        return split( term ).pop();         
    }

    $("#accountName").bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).data( "autocomplete" ).menu.active ) {
            event.preventDefault();
        }

    }).autocomplete({
        minLength: 2,
        autoFocus: false,

        source: function( request, response ) {             
            // delegate back to autocomplete, but extract the last term
            response( $.ui.autocomplete.filter(
                    availableTags, extractLast( request.term ) ) );
        },
        focus: function() {             
            // prevent value inserted on focus
            return false;
            //return false;
        },
        select: function( event, ui ) {             
            var terms = split( this.value );
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.value );
            // add placeholder to get the comma-and-space at the end
            terms.push( "" );
            this.value = terms.join(" ");

            // added to trim space
            $("#accountName").val($.trim($("#accountName").val()));

            return false;
        }
    });
}); 

Answer 1

Stop the event propoagation on select event of autocomplete.

$( ".selector" ).autocomplete({
   select: function(event, ui) {  
       event.stopPropagation();
   }
});