如何取消jqueryui的自動完成功能？

Question

我有一個輸入字段，其中附加了一個ajax數據源自動完成功能。

我有一個用於輸入字段的鍵入處理程序，該處理程序查找有人按下Enter鍵的行為，當他們這樣做時，它會觸發對搜索按鈕的單擊，Ajax會在另一個div中加載一些數據。

問題是，如果此人很快，然后鍵入並按Enter，則自動完成功能仍會彈出。

我嘗試了以下方法：

添加$('#autocomplete').autocomplete('close') 。 這不起作用，大概是因為自動完成功能尚未打開。 如果輸入，請等待自動完成提示，然后按Enter鍵，它將正確關閉。
添加$('#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>

Answer 1

一種解決方法是使input失去焦點。 您可以使用.blur()做到這一點。 如何做這樣的事情：

JAVASCRIPT：

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

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

Answer 2

假設您有一個單頁應用程序。

您可以使用

 <form onsubmit="return false;">...<form>

這將捕獲Enter鍵或任何觸發提交的事件。

然后，您可以自己綁定Submit事件並執行：

  $('input').blur().focus(); do something with $('input').val();

Answer 3

在當前版本的jQuery UI中，您可以使用search事件在對數據源進行請求之前進行一些檢查

https://api.jqueryui.com/autocomplete/#event-search

  let autocompleteData = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", 333333, 222222, 111111, 123456 ]; $('input').autocomplete({ source: autocompleteData, search:function(e,u){ let value = e.target.value; // stops the event from continuing if value integer. if( Number.isInteger(parseInt(value)) ){ e.preventDefault(); } }, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <input type="text">

如何取消jqueryui的自動完成功能？

問題描述

3 個解決方案

解決方案1
4 已采納 2013-03-25 21:41:18

解決方案2
0 2016-01-07 11:49:11

解決方案3
0 2019-02-06 18:12:17

如何取消jqueryui的自動完成功能？

問題描述

3 個解決方案

解決方案1 4 已采納 2013-03-25 21:41:18

解決方案2 0 2016-01-07 11:49:11

解決方案3 0 2019-02-06 18:12:17

解決方案1
4 已采納 2013-03-25 21:41:18

解決方案2
0 2016-01-07 11:49:11

解決方案3
0 2019-02-06 18:12:17