Ajax 및 키 프레스를 사용하여 검색 최적화

Ajax 및 키 프레스를 사용하여 검색 최적화

사용자가 텍스트 상자에 입력할 때 데이터베이스를 검색하는 데 사용할 코드가 있습니다.아래의 코드는 정상적으로 동작하고 있습니다만, 유저가 매우 빠르게 타이핑을 하고 있는 것처럼, 조금 비효율적인 것 같습니다.필요한 것보다 더 많은 검색을 수행할 수 있습니다.따라서 사용자가 "sailing"을 입력할 경우 "sail", "saili", "sailin" 및 "sailing"에서 검색합니다.

사용자가 500밀리초 동안 입력을 멈출 때만 검색할 수 있도록 키를 누를 수 있는 방법이 있는지 알고 싶었습니다.

이런 것에 대한 모범 사례가 있나요?

$('#searchString').keypress(function(e) {

    if (e.keyCode == 13) {

        var url = '/Tracker/Search/' + $("#searchString").val();
        $.get(url, function(data) {
            $('div#results').html(data);
            $('#results').show();
        });
    }
    else {

        var existingString = $("#searchString").val();
        if (existingString.length > 2) {
            var url = '/Tracker/Search/' + existingString;
            $.get(url, function(data) {
                $('div#results').html(data);
                $('#results').show();
            });
        }
    }

다음과 같은 작업을 수행할 수 있습니다.

$('#searchString').keyup(function(e) {
    clearTimeout($.data(this, 'timer'));
    if (e.keyCode == 13)
      search(true);
    else
      $(this).data('timer', setTimeout(search, 500));
});
function search(force) {
    var existingString = $("#searchString").val();
    if (!force && existingString.length < 3) return; //wasn't enter, not > 2 char
    $.get('/Tracker/Search/' + existingString, function(data) {
        $('div#results').html(data);
        $('#results').show();
    });
}

이 조작은, 검색의 실행입니다).keyup, 보다 낫다.keypress이 경우) 이후500ms타이머를 저장함으로써#searchString요소의 컬렉션.모든keyup그 타이머를 클리어 하고, 키가 입력되면, 다른 키를 설정하지 않으면, 즉시 검색합니다.500ms타임아웃을 설정합니다.

다음 오래된 질문을 참조하십시오.

검색을 수행하기 전에 실시간 jQuery 검색을 잠시 기다리려면 어떻게 해야 합니까?

각 키를 누를 때마다 원하는 지연으로 set Timeout 함수를 사용합니다.따라서 이 함수는 타임아웃 후에 기동됩니다.각 키를 누르면 타이머가 삭제되고 clearTimeout()을 사용하여 새로운 타이머가 설정됩니다.

모든 광고를 스크롤하는 예는 여기를 참조하십시오.

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

나는 단지 그 질문에 몇 가지 포인트를 더 추가하고 싶을 뿐이다.슬롯링 및 데바운스의 개념은 이 토픽과 관련되어 있습니다.

슬롯링 : 지정된 간격으로 기능을 실행할 수 있습니다.

데바운스 : 사용자가 입력을 정지했을 때 함수를 실행할 수 있습니다.

이 두 가지 기능은 setimeout 및 cleartimeout 기능을 통해 실현할 수 있습니다.이 링크를 클릭하면 알기 쉽게 확인할 수 있습니다.

링크

언급URL : https://stackoverflow.com/questions/3028704/optimised-search-using-ajax-and-keypress