使用 ajax 键入时的 jQuery 搜索答案

【问题标题】：jQuery search as you type with ajax使用 ajax 键入时的 jQuery 搜索
【发布时间】：2012-04-25 15:14:14
【问题描述】：

我正在尝试创建一个搜索，您将文本输入到文本字段中，并且 onkeyup 它将触发一个函数，该函数将字段的值发送到页面并将结果返回到 div 容器。我遇到的问题是，当有人打字时，会出现可怕的延迟。我认为正在发生的事情是它试图搜索输入的每个字母并执行每个请求。我如何做到这一点，如果我在框中输入，等待 1/2 秒（500），如果没有输入，则进行 ajax 搜索，但如果在那个时间范围内出现另一个字母，不要甚至打扰ajax请求。我一直在为此绞尽脑汁，无法弄清楚。感谢所有帮助！

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

【问题讨论】：

您是否为此使用任何库？
听起来你可能正在尝试重新实现轮子，相对于 jQuery Autocomplete 插件。
这很酷，我会记住这一点，但是对于这种情况，我尝试加载的结果是一个带有表格和其他内容的页面。我没有返回一个简单的数组。还有其他想法吗？感谢您的回复！
非 jQuery 选项现在包括 Lea Verou 的 Awesomplete 和 Twitter 的 typeahead.js。

标签： jquery

【解决方案1】：

这将清除每次按下的超时，所以如果 1/2 秒还没有过去，则不会执行 func，然后再次设置一个 500 毫秒的计时器。就是这样，不需要加载一个大库..

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

【讨论】：

有一个bug：如果你不想立即调用函数，你必须添加一个闭包。
用 var $this = $(this); 替换最后一行线程 = setTimeout(function(){findMember($this.val())}, 5000);
不确定您所说的“关闭”是什么意思。你可以解释吗？另外，我尝试了这段代码，但我根本没有得到任何回应。我这样做了：$('#searchField').keyup(function() { alert('hello'); ` 清除超时（线程）； ` 线程 = setTimeout(findMember($(this).val()), 500); `});我什至没有收到警报
我添加了一个带有修复的评论。问题是 findMember 被立即调用，而不是等待 500 毫秒。
我做了一个小提琴（用 1000 毫秒）来演示正确的解决方案：jsfiddle.net/dystroy/saTm9

【解决方案2】：

jquery ui 自动完成有这个功能。

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

如果你不想用jquery ui，那就看看他们的源码吧。

【讨论】：

这很酷，我会记住这一点，但是对于这种情况，我尝试加载的结果是一个带有表格和其他内容的页面。我没有返回一个简单的数组。还有其他想法吗？感谢您的回复！
好的。取点。所以infensus的回答似乎更符合你的需要。

【解决方案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>

【讨论】：