Поиск jQuery по мере ввода с помощью ajax

Я пытаюсь создать поиск, в который вы вводите текст в текстовое поле, а onkeyup - это отключить функцию, которая отправит значение поля на страницу и вернет результаты в контейнер div. Проблема в том, что когда кто-то печатает, происходит ужасное отставание. Я думаю, что происходит, что он пытается найти каждое введенное письмо и делает каждый запрос. Как сделать так, чтобы, если я ввожу в поле, подождите 1/2 секунды (500), если ничего не набрано, тогда выполните поиск ajax, но если в этот временной интервал появится другая буква, не даже беспокоиться с запросом ajax. Я набросился на это и не могу понять. Вся помощь приветствуется!

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

Ответы

Ответ 1

Что это будет делать, так это очистить таймаут при каждом нажатии, поэтому, если 1/2 секунды не прошло, функция funt не будет выполнена, а затем снова установите таймер на 500 мс. То есть, нет необходимости загружать большую библиотеку.

  $(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/

Ответ 2

Автозаполнение jquery ui имеет эту функцию.

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

Если вы не хотите использовать jquery ui, посмотрите исходный код.

Ответ 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>