使用ajax键入jQuery搜索

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,那么看看他们的源代码.