Как выполнить ajax-поиск onkeyup с помощью jquery

My Script для вызова ajax

<script language="javascript">
function search_func(value)
{
    $.ajax({
       type: "GET",
       url: "sample.php",
       data: {'search_keyword' : value},
       dataType: "text",
       success: function(msg){
                   //Receiving the result of search here
       }
    });
}
</script>

HTML

   <input type="text" name="sample_search" id="sample_search" onkeyup="search_func(this.value);">

Вопрос: while onkeyup Я использую ajax для получения результата. Как только результат задержки ajax увеличивается, проблема возникает для меня.

Пример При вводе t ключевого слова я получаю результат ajax и при вводе te получаю ajax результат когда ajax временная задержка между двумя нажатиями клавиш вызывает серьезную проблему.

Когда я набираю te быстро. ajax ищет ключевое слово t, опаздывающее, при сравнении с te. Я не знаю, как обращаться с такими случаями.

Результат Набрав te ключевое слово быстро из-за задержек ajax. результат для ключевого слова t.

Я полагаю, что я объяснил знания читателя.

Ответы

Ответ 1

Вы должны проверить, изменилось ли значение со временем:

var searchRequest = null;

$(function () {
    var minlength = 3;

    $("#sample_search").keyup(function () {
        var that = this,
        value = $(this).val();

        if (value.length >= minlength ) {
            if (searchRequest != null) 
                searchRequest.abort();
            searchRequest = $.ajax({
                type: "GET",
                url: "sample.php",
                data: {
                    'search_keyword' : value
                },
                dataType: "text",
                success: function(msg){
                    //we need to check if the value is the same
                    if (value==$(that).val()) {
                    //Receiving the result of search here
                    }
                }
            });
        }
    });
});

EDIT:

Добавлена ​​переменная searchRequest, чтобы исключить несколько ненужных запросов на сервер.

Ответ 2

Сохраняйте объект XMLHttpRequest, возвращаемый $.ajax(), а затем в следующую клавиатуру вызовите .abort(). Это должно убить предыдущий запрос ajax и позволить вам сделать новый.

var req = null;

function search_func(value)
{
    if (req != null) req.abort();

    req = $.ajax({
        type: "GET",
        url: "sample.php",
        data: {'search_keyword' : value},
        dataType: "text",
        success: function(msg){
                    //Receiving the result of search here
        }
    });
}

Ответ 3

Попробуйте использовать автозаполнение jQuery UI . Экономит вас от многих низкоуровневых кодировок.

Ответ 4

Во-первых, я предлагаю, чтобы сделать ajax-вызов для каждой клавиатуры нехорошим (и это почему вы запускаете в этой проблеме).

Второй, если вы хотите использовать keyup, затем покажите загрузочное изображение после окна ввода, чтобы показать пользователю его по-прежнему загрузку (используйте загружаемое изображение, как вы добавляете комментарий)

Ответ 5

Пара указателей. Во-первых, язык является устаревшим атрибутом javascript. В HTML (5) вы можете оставить атрибут выключенным или использовать type = "text/javascript". Во-вторых, вы используете jQuery, так почему у вас есть встроенный вызов функции, когда вы можете сделать это с помощью jQuery?

$(function(){

   // Document is ready

   $("#sample_search").keyup(function()
   {

       $.ajax({
          type: "GET",
          url: "sample.php",
          data: {'search_keyword' : value},
          dataType: "text",
          success: function(msg)
          {
               //Receiving the result of search here
          }
       });

   });

});

Я бы предложил оставить небольшую задержку между событием keyup и вызовом функции ajax. То, что вы можете сделать, это использовать setTimeout, чтобы проверить, что пользователь закончил ввод, прежде чем называть вашу функцию ajax.