예측 검색 결과:키업 기능 내에서 getJSON이 완료된 후 Jquery 실행 기능

Question

여기에서 getJSON/ajax 요청의 지연된 기술에 대한 많은 답변을 읽었지만 내 시나리오에 맞는 것은 아무것도 없는 것 같습니다.검색 입력이 4자 이후의 getJSON 호출을 기반으로 결과 집합을 반환하도록 만들고 있습니다.이는 반환되는 결과의 양과 Ajax 요청의 양을 제한하기 위한 것입니다(더 효과적인 솔루션이 가능함).

search_input.on('keyup', function() {

    var string       = $(this).val();
    var quiet_chars  = 4;

    if(string.length < quiet_chars) {

        // Simple notifications function which passes a message to a div, and optional class
        notification('Type '+(quiet_chars - string.length)+' more characters to search');
    }
    if(string.length == quiet_chars) {
        notification('Searching...', 'loading');
        $.getJSON('stores/stores-search/'+string, function(data) {

            // Loop through data and build list....
            $('.search_results').html('<ul>'+list_html+'</ul>');

            // Function which shows/hides list items based on Jquery :contains
            searchResults(string);

        });
    }
    if(string.length > quiet_chars) {
        searchResults(string);
    }

});

제가 직면하고 있는 구체적인 문제는 5자(4자 이상)를 빠르게 입력하면 if(string.length > quiet_chars) 조건이 충족되기 전에 $('.search_results').html('<ul>'+list_html+'</ul>'); 실행되었으며 사용자에게 검색 결과가 없다고 알려줍니다.

나는 ~을 만나야 해 if(string.length > quiet_chars) 반환된 결과를 계속 필터링하는 조건이지만 getJSON 요청에서 목록이 DOM에 추가된 후에만 가능합니다.감사해요.

Answer 1

작동했습니다!

var json_success = false,
    ajax_term;

function searchJson(string) {
    ajax_term = string;
    notification('Searching...', 'loading');
    $.getJSON('stores/stores-search/'+string, function(data) {

        // Loop through data and build list....
        $('.search_results').html('<ul>'+list_html+'</ul>');
        searchResults(string);
        json_success = true; 

    });
}

search_input.on('keyup', function() {

    var string       = $(this).val();
    var quiet_chars  = 4;

    if(string.length < quiet_chars) {
        json_success = false;
        notification('Type '+(quiet_chars - string.length)+' more characters to search');
    } else {

        if(json_success !== false || string.substr(0,4) !== ajax_term) {
            $.when(searchJson(string)).then(searchResults(string))
        } else {
            searchResults(string)
        }
    }
});

여기에서: https://stackoverflow.com/questions/5280699#5291067

누구든 비슷한 작업을 수행하려는 경우 내 검색 결과 기능은 다음과 같습니다.

//extends :contains to be case insensitive
$.extend($.expr[':'], {
    'containsi': function(elem, i, match, array) {
        return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

// Instant search results
function searchResults(searchTerm) {

    var searchSplit = searchTerm.replace(/ /g, "'):containsi('");

    $(".search_results .tile").not(":containsi('" + searchSplit + "')").each(function() {
        $(this).addClass('hide').removeClass('show');
    });
    $(".search_results .tile:containsi('" + searchSplit + "')").each(function() {
        $(this).removeClass('hide').addClass('show');
    });

    var resultCount = $('.search_results .show').length;

    if(resultCount != '0') {
        notification('Showing '+resultCount+' results');
    } else {
        notification('No results', 'error');
    }
}

대소 문자를 구분하지 않는 버전에 대한 크레딧 :contains 로 이동 롭 소이어.

Answer 2

사양에 맞게 편집됨

bool dataLoaded = false; //this is a global variable we have outside of the scope of the search_input.on function
search_input.on('keyup', function() {

    var string       = $(this).val();
    var quiet_chars  = 4;

    if(string.length < quiet_chars) {
        //let's reset the dataLoaded flag if the user ends up deleting characters and what not
        if(dataLoaded)
           dataLoaded = !dataLoaded;
        // Simple notifications function which passes a message to a div, and optional class
        notification('Type '+(quiet_chars - string.length)+' more characters to search');
    }
    if(string.length == quiet_chars) {
        notification('Searching...', 'loading');
        $.getJSON('stores/stores-search/'+string, function(data) {

            // Loop through data and build list....
            $('.search_results').html('<ul>'+list_html+'</ul>');
            dataLoaded = true;
            // Function which shows/hides list items based on Jquery :contains
            searchResults(string);

        });
    }
    else if(dataLoaded){
        searchResults(string);
    }


});