Question

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.

Answer 1

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;
    }
});