CODEWITHSUNDEEP
javascriptjquery-ui-autocompletehtml-input
Dreadlord
Dreadlord

Reputation: 413

Autocomplete dropdown - submit on click/enter key

Somewhere I found an autocomplete script which suits me perfectly, but there is one thing that I don't know how to change. When you click on something in dropdown it doesn't submit this string, you have to click to select the string and after that click on submit button or press enter. I would like this dropdown autocomplete to submit selected string on click or when pressing enter. This is the code:

        <link rel="stylesheet" href="ac.css" />    
        <script src="./java/jquery182.js"></script>    
        <script src="./java/jqueryui.js"></script>    
        <script>    
        $(function() {        
        var availableTags = [            
        "Car",   
        "Gun",
        "Apple",
        "Example"]; 

         $( "#txt" ).autocomplete({            
         source: availableTags        
         }); 
         });   
         </script>

        <script type="text/javascript"> 
        <!-- 
        function enter(e){ 
        if(e.keyCode == 13) 
        { 
        doSomething(); 
        return false; 
        } 
        } 
        //--> 
        </script> 


<input class="ui-widget" id="txt" type="text" onkeypress="return enter(event);">
<button type="button" id="btn" onclick="doSomething()">Submit</button>

Function doSomething(); has to be there because I need it. This function: onkeypress="return enter(event);" is here so that when enter is pressed, value gets submitted to the doSomething(); function. There are 2 Javascript documents (jquery182.js and jqueryui,js) which have around 10,000 lines of code so I had to upload them here: http://speedy.sh/a67xR/java-files.zip Hope someone can help me with this.

Upvotes: 3

Views: 3684

Answers (1)

st3inn
st3inn

Reputation: 1596

You have to configure the onclick/select behaviour in the call to autocomplete, try this:

$( "#txt" ).autocomplete({            
    source: availableTags,
    select: function(event, ui) {
        $(event.target).val(ui.item.value);
        doSomething();
        return false;
    }
});

Upvotes: 2

Related Questions