Question

我正在尝试创建一个搜索，您可以在其中输入文本到文本字段和onkeyup，它将触发一个函数，将该字段的值发送到页面并将结果返回到div容器。我遇到的问题是，当有人打字时，会出现可怕的延迟。我认为正在发生的是它正在尝试搜索输入的每个字母并执行每个请求。我怎么做到这样，如果我输入框，等待1/2秒（500），如果没有输入，然后进行ajax搜索，但如果在该时间范围内出现另一个字母，请不要甚至打扰了ajax请求。我一直在沉溺于此，无法弄明白。感谢所有帮助！

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

Answer 1

这样做会清除每次按下的超时，所以如果1/2秒没有通过func就不会被执行，那么再次设置一个500ms的定时器。多数民众赞成，无需加载大型图书馆..

  $(document).ready(function() {

    var timeoutID = null;

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

    $('#target').keyup(function(e) {
      clearTimeout(timeoutID);
      //timeoutID = setTimeout(findMember.bind(undefined, e.target.value), 500);
      timeoutID = setTimeout(() => findMember(e.target.value), 500);
    });

  });

演示：https://jsfiddle.net/zu2L8f0o/

Answer 2

jquery ui autocomplete具有此功能。

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

如果您不想使用jquery ui，请查看其源代码。

Answer 3

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>

使用ajax键入jQuery搜索

3 个答案: