【问题标题】:Autocomplete dropdown - submit on click/enter key自动完成下拉菜单 - 点击/输入键提交
【发布时间】:2012-10-10 13:34:41
【问题描述】:

我在某个地方找到了一个非常适合我的自动完成脚本,但有一点我不知道如何更改。当您单击下拉列表中的某些内容时,它不会提交此字符串,您必须单击以选择字符串,然后单击提交按钮或按 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);" 在这里,所以当按下回车键时,值被提交给doSomething(); 函数。有 2 个 Javascript 文档(jquery182.js 和 jqueryui,js)有大约 10,000 行代码,所以我不得不在这里上传它们:http://speedy.sh/a67xR/java-files.zip希望有人可以帮助我。

【问题讨论】:

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


    【解决方案1】:

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

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

    【讨论】:

    • 试过了,它只在firefox和opera中有效,但只有在按下回车时,点击后在任何浏览器上都会有反应
    • 页面加载后(即 autocomplete() 函数完成它的工作后)HTML 是什么样的?我猜它与 jquery ui 页面上的演示不同,因此我的选择器不准确。
    • 你可以试着把$("#ui-id-1 li a").on('click', function() { codeAddress(); });放在$("#address").autocomplete({ source:availableTags });之后
    • ..您必须在对autocomplete 的调用中对其进行配置...查看已编辑的答案(稍微)..
    猜你喜欢
    • 2021-11-05
    • 1970-01-01
    • 1970-01-01
    • 2018-04-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多