如何使用 jqueryui 取消自动完成？

Question

如何使用 jqueryui 取消自动完成？

Ben*_*ess 3 jquery-ui autocomplete jquery-ui-autocomplete

我有一个输入字段，其中附加了一个 ajax 数据源自动完成功能。

我有一个输入字段的 keyup 处理程序，它会查找按下 Enter 的人，当他们这样做时会触发对搜索按钮的点击，ajax 会在另一个 div 中加载一些数据。

问题是，如果这个人快速输入并按下回车键，自动完成仍然会弹出。

我尝试了以下方法：

添加$('#autocomplete').autocomplete('close'). 这不起作用，大概是因为自动完成尚未打开。如果我输入，等待自动完成出现，然后按回车键，它会正确关闭它。
添加$('#autocomplete').autocomplete('destroy'). 这有效，但如果我回到现场尝试另一次搜索，自动完成不再有效。

所以我想要的是一种取消任何挂起的请求并关闭自动完成（如果它打开）但不禁用或破坏它的方法。

编辑：代码示例（不是我真正的代码，只是用来演示问题的存根）。文件名是scratch.php

<?php
// Stub for search results
if ($_GET['search'])
{
    print "Search results for ".$_GET['search']." here";
    exit();
}

// Simulated DB search
if ($_GET['term'])
{
    print '[{"label":"A 1"},{"label":"A 2"},{"label":"A 3"},{"label":"A 4"}]';
    exit();
}
?>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <link type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/redmond/jquery-ui.css" rel="stylesheet" />
    <script language='javascript'>
    $(document).ready(function() {
        $('#searchfor').on('keyup',function(e) {
            if (e.which == 13) $('#search').trigger('click');
        });
        $('#searchfor').autocomplete({
            source: "/scratch.php",
            minLength: 2,
            select: function( event, ui ) {
                $('#searchfor').val(ui.item.value);
                $('#search').trigger('click');
            }
        });
        $('#search').on('click',function() {
            try
            {
                // Cancel any pending autocompletes without destroying the autocomplete completely here.
                // This currently doesn't work
                $('#searchfor').autocomplete("close");
            }
            catch(e)
            {
                // Do nothing except prevent an error
            }
            $('#results').load('scratch?search='+encodeURIComponent($('#searchfor').val()));
        });
    });
    </script>
</head>
<input id='searchfor' /> <input id='search' type='button' value='search' />
<div id='results'></div>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Dom*_*Dom 5

解决这个问题的一种方法是让input注意力分散。您可以使用.blur(). 如何做这样的事情：

爪哇脚本：

$(document).ready(function() {
        $('#searchfor').on('keyup',function(e) {
            if (e.which == 13) $('#search').trigger('click');
               $('#searchfor').blur();
        });
        $('#searchfor').autocomplete({
            source: "/scratch.php",
            minLength: 2,
            select: function( event, ui ) {
                $('#searchfor').val(ui.item.value);
                $('#search').trigger('click');
            }
        });
        $('#search').on('click',function() {
            $('#results').load('scratch?search='+encodeURIComponent($('#searchfor').val()));
        });
    });

Run Code Online (Sandbox Code Playgroud)

演示：http : //jsfiddle.net/dirtyd77/dMjRb/3/

归档时间：	12 年，5 月前
查看次数：	4630 次
最近记录：	6 年，7 月前