Поиск при быстром наборе скрипт выдает предыдущий результат как решить?

272

15 ноября 2017, 02:40

Есть скрипт поиска:

var suggest_count = 0;
var input_initial_value = '';
var suggest_selected = 0;
$(window).load(function(){
    // читаем ввод с клавиатуры
    $("#search_box").keyup(function(I){
        // определяем какие действия нужно делать при нажатии на клавиатуру
        switch(I.keyCode) {
            // игнорируем нажатия на эти клавишы
            case 13:  // enter
            case 27:  // escape
            case 38:  // стрелка вверх
            case 40:  // стрелка вниз
            break;
            default:
                // производим поиск только при вводе более 2х символов 
                    if($(this).val().length>1){ 
                        input_initial_value = $(this).val();
                        var id_cabinet = $(this).data("id-cabinet");
                        // производим AJAX запрос к /ajax/ajax.php, передаем ему GET query, в который мы помещаем наш запрос
                            jQuery.ajax({
                                type: "post",
                                url: "/search.php?vid=global",
                                data: "search="+$(this).val()+"",
                                dataType: 'json',
                                success: function(data){
                                    if(data.succes == 1){
                                        // перед показом слоя подсказки, его обнуляем
                                        $("#search_advice_wrapper").html("").show();
                                        // добавляем слою позиции
                                        $('#search_advice_wrapper').append(''+data.search_content+'');
                                        $('.search-line').bind('click', function () {
                                            ...
                                        });
                                    } else {
                                         // добавляем слою позиции
                                         $("#search_advice_wrapper").html("").show();
                                         $('#search_advice_wrapper').append(''+data.search_content+'');
                                    }
                                }
                            });
                    }
            break;
        }
    });
    // делаем обработку клика по подсказке
    $('.advice_variant').on('click',function(){
        // ставим текст в input поиска
        $('#search_box').val($(this).text());
        // прячем слой подсказки
        $('#search_advice_wrapper').fadeOut(350).html('');
    });
    // если кликаем на поле input и есть пункты подсказки, то показываем скрытый слой
    $('#search_box').click(function(event){
        //alert(suggest_count);
        if(suggest_count)
            $('#search_advice_wrapper').show();
        event.stopPropagation();
    });
});

При медленном наборе запроса например по id "7202" ищет хорошо, т.е. прям медленно набираешь, если быстро набрать "7202", то выдает данные и видно что искал только по "720"...

Что может быть? Может умную задержку как-то кто-то делал?

Answer 1

В данном коде будут создаваться несколько конкурентных ajax запросов, выполнение результат которых будет работать непредсказуемо.

Можно при создании запроса сохранять его в переменную:

var request = $.ajax({
    type: 'POST',
    url: 'url',
    success: function(result){}
});

При последующих запросах нужно оборвать работу предыдущего:

request.abort();

И запустить новый запрос, функция success которого корректно отобразит последние данные.

Следующий этап - внедрить задержку вызова ajax запроса через setTimeout, например:

var delayTimer;
function doSearch(text) {
    clearTimeout(delayTimer);
    delayTimer = setTimeout(function() {
        // вызов ajax
    }, 1000); 
}