3

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

3 に答える 3

5

これを実行する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/

于 2013-03-25T21:41:18.790 に答える
1

jQuery UIの現在のバージョンでは、データソースへのリクエストが行われる前に、検索イベントを使用していくつかのチェックを行うことができます

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

于 2019-02-06T18:12:17.063 に答える
0

1ページのアプリがあると仮定します。

  1. 入力を次のようにラップできます

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

これにより、Enterキーまたは送信をトリガーするイベントがキャッチされます。

  1. 次に、送信イベントを自分でバインドして、次の操作を実行できます。

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

于 2016-01-07T11:49:11.627 に答える