27

テキストフィールドにテキストを入力してonkeyupすると、フィールドの値をページに送信して結果をdivコンテナに返す関数が起動する検索を作成しようとしています。私が抱えている問題は、誰かが入力しているときに、ひどい遅れが起こっているということです。何が起こっているのかというと、入力された各文字を検索し、各要求を実行しようとしているということだと思います。ボックスに入力した場合、1/2秒（500）待機し、何も入力されていない場合はajax検索を実行するようにするにはどうすればよいですか？ただし、その時間枠内に別の文字が表示された場合は、実行しないでくださいajaxリクエストでさえ気になります。私はこれに頭を悩ませてきました、そしてそれを理解することができません。すべての助けに感謝します！

// fired off on keyup
function findMember(s) {
    if(s.length>=3)
        $('#searchResults').load('/search.asp?s='+s);
}
4

3 に答える 3

54

これにより、押すたびにタイムアウトがクリアされるため、1/2秒が経過していなければ、関数は実行されません。次に、タイマーを500msに再度設定します。それだけです。大きなライブラリをロードする必要はありません。

let timeoutID = null;

function findMember(str) {
  console.log('search: ' + str)
}

$('#target').keyup(function(e) {
  clearTimeout(timeoutID);
  const value = e.target.value
  timeoutID = setTimeout(() => findMember(value), 500)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" id="target" placeholder="Type something" />

于 2012-04-25T15:19:38.173 に答える
6

jqueryuiオートコンプリートにはこの機能があります。

http://jqueryui.com/demos/autocomplete/

jquery uiを使用したくない場合は、それらのソースコードを確認してください。

于 2012-04-25T15:18:11.867 に答える
2 
function myFunction(inputText) {
                debugger;
                var inputText = document.myForm.textBox.value;

                var words = new Array();
                var suggestions = "Always", "azulejo", "to", "change", "an", "azo", "compound", "third"];
                if (inputText != "") {
                    for (var i = 0; i < suggestions.length; ++i) {
                        var j = -1;
                        var correct = 1;
                        while (correct == 1 && ++j < inputText.length) {
                            if (suggestions[i].toUpperCase().charAt(j) != inputText.toUpperCase().charAt(j)) correct = 0;
                        }
                        if (correct == 1) words[words.length] = suggestions[i];
                        document.getElementById("span1").innerHTML = words;

                    }
                }

                else {
                    document.getElementById("span1").innerHTML = "";

                }

<p id="demo"></p>
    <form name="myForm">
         <input type="text" name="textBox" onkeyup="myFunction()"/>
         <span id="span1"></span>
    </form>
于 2015-08-26T13:26:05.703 に答える