自动完成下拉菜单 - 通过点击/输入键提交

时间:2012-10-19 21:26:09

标签: javascript jquery-ui-autocomplete html-input

在某个地方,我发现了一个完全适合我的自动完成脚本,但有一件事我不知道如何改变。单击下拉列表中的某些内容时,它不会提交此字符串,您必须单击以选择字符串,然后单击“提交”按钮或按Enter键。我希望此下拉菜单自动完成功能,以便在点击或按Enter键时提交所选字符串。这是代码:

        <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>

函数doSomething();必须存在,因为我需要它。此函数:onkeypress="return enter(event);"在此处,以便在按下enter时,将值提交给doSomething();函数。有2个Javascript文档(jquery182.js和jqueryui,js)有大约10,000行代码,所以我必须在这里上传它们:http://speedy.sh/a67xR/java-files.zip希望有人可以帮我这个。

1 个答案:

答案 0 :(得分:2)

您必须在调用autocomplete时配置onclick / select行为,试试这个:

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