Jak przybliżyć ajax wyszukiwania onkeyup z jQuery

Question

mój skrypt zadzwonić 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);"> 

Pytanie: podczas onkeyup używam ajax do sprowadzenia wynik. Po wydłużeniu wyniku ajaxowego pojawia się problem.

Dla przykładu Podczas wpisywania t słowa kluczowego otrzymuję wynik ajax i podczas pisania te Otrzymuję ajax ajax wynik gdy zwłoka czasowa pomiędzy dwoma keyup kiedyś sprawia poważny problem.

Po napisaniu szybko: te. Wyszukiwanie ajax dla słowa kluczowego t spóźnia się, gdy porównać do te. Nie wiem, jak sobie z tym poradzić.

Wynik Podczas wpisywania słowa kluczowego te szybko ze względu na opóźnienia ajax. wynik dla słowa kluczowego t.

Sądzę, że wyjaśniłem wiedzę czytelnika.

Answer 1

Należy sprawdzić, czy wartość ta zmienia się w czasie:

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:

Zmienna searchRequest dodano zapobiec wielu niepotrzebnych żądań do serwera.

Answer 2

Najpierw zasugeruję, że wykonanie wywołania ajaxa przy każdym kluczowaniu nie jest dobre (i dlatego uruchamiamy ten problem).

Po drugie, jeśli chcesz używać keyup następnie pokazać obraz obciążanie po polu tekstowym, aby pokazać użytkownikowi jego wciąż załadunku (wykorzystanie loading image jak można dostać się na dodanie komentarza)

Answer 3

Należy chwycić przedmiot XMLHttpRequest że $.ajax() powraca i następnie przy następnym wywołaniu wywołaj funkcję .abort(). To powinno zabić poprzednią prośbę ajaxową i pozwolić ci zrobić nową.

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 
     } 
    }); 
} 

Answer 4

Kilka wskaźników. Po pierwsze, język jest przestarzałym atrybutem javascript. W HTML (5) możesz wyłączyć atrybut lub użyć type = "text/javascript". Po drugie, używasz jQuery, więc dlaczego masz wbudowane wywołanie funkcji, jeśli możesz to zrobić również z 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 
      } 
     }); 

    }); 

}); 

Proponuję zostawić trochę opóźnienia między zdarzeniem keyup a wywołaniem funkcji ajax. Możesz użyć funkcji setTimeout, aby sprawdzić, czy użytkownik skończył pisać przed wywołaniem funkcji ajax.

Answer 5

Spróbuj użyć urządzenia jQuery UI autocomplete. Zapisuje Cię z wielu niskopoziomowych kodowań.