jQuery ile verimli AutoSuggest?

Question

Apple'ın spot ışığından esinlenmiş bir jQuery AutoSuggest eklentisi oluşturmak için çalışıyorum.

$(document).ready(function() { 
$('#q').bind('keyup', function() { 

    if($(this).val().length == 0) { 
     // Hide the q-suggestions box 
     $('#q-suggestions').fadeOut(); 
    } else { 
     // Show the AJAX Spinner 
     $("#q").css("background-image","url(/images/ajax-loader.gif)"); 

     $.ajax({ 
      url: '/search/spotlight/', 
      data: {"q": $(this).val()}, 
      success: function(data) { 
       $('#q-suggestions').fadeIn(); // Show the q-suggestions box 
       $('#q-suggestions').html(data); // Fill the q-suggestions box 

       // Hide the AJAX Spinner 
       $("#q").css("background-image","url(/images/icon-search.gif)"); 

      } 
     }); 
    } 
}); 

Ben zarif iyi & çözmek istediğiniz mesele, sever öldürme değildir:

İşte genel kodudur. Şu anda yukarıdaki kod, bir anahtar yazdığınız her seferinde sunucuyu vurur ve yazmayı bitirmeyi beklemez. Bunu çözmenin en iyi yolu nedir? A. Önceki AJAX isteğini öldürmek mi istiyorsunuz? B. Bazı AJAX önbellekleme türleri nelerdir? C. Kişinin 300ms için yazmayı durdurduğunda yalnızca .AJAX() öğesini göndermek için bir tür gecikme ekleme. kullanıcı bitmeden

Answer 1

deneyin kullanarak Ben Alman's Throttle & Debounce plugin

siz "gecikme" şeyler sağlar. onun example of debouncing with a pretend autocomplete

Kodunuz temelde olacaktı o kontrol nasıl kullanılacağı hakkında bir örnek için

var qinput = $('#q').bind('keyup', $.debounce(250, function() { 

    if($(this).val().length == 0) { 
     // Hide the q-suggestions box 
     $('#q-suggestions').fadeOut(); 
    } else { 
     // Show the AJAX Spinner 
     qinput.addClass('loading'); 

     $.ajax({ 
      url: '/search/spotlight/', 
      data: {"q": $(this).val()}, 
      success: function(data) { 
       $('#q-suggestions') 
        .fadeIn() // Show the q-suggestions box 
        .html(data); // Fill the q-suggestions box 

       // Hide the AJAX Spinner 
       qinput.removeClass('loading').addClass('search'); 
      } 
     }); 
    } 
})); 

CSS

Ben senin Arka plan resmi çıkardıkları yönündeki

.loading{ 
    background: url('/images/ajax-loader.gif'); 
} 
.search{ 
    background: url('/images/icon-search.gif'); 
} 

Sen notu olacak css ve bunları addClass/removeClass ile değiştirin. CSS dosyaları css dosyaları yönetmek için çok daha kolay.

Answer 2

C'nin bir varyantı için giderdim. Kullanıcıların yazmayı durdurmasını beklemeyin, ancak ilk tuşa basıldıktan sonra biraz bekleyin (200ms?). Daha sonra, bu süre zarfında, birçok durumda ek tuş vuruşlarını almış olacaksınız ve daha sonra otomatik yazılanları almak için yazılan karakterleri kullanıyorsunuz. İsteği gönderdikten sonra başka bir tuşa basılırsa, tekrar saymaya başlarsınız.

Ayrıca bazı önbelleğe alma işlemlerini de yapmalısınız; insanlar geri boşluğu kullanacak ve tekrar isim listesini göstermeniz gerekecek.

Answer 3

Otomatik tamamlama eklentisi, bunu yapmak için ayarlayabileceğiniz bir zaman aşımı seçeneğine sahiptir. DB kullandığınız VEYA kodlanmış dosyasını kullanarak hangi

http://docs.jquery.com/Plugins/AutoComplete/autocomplete

Answer 4

Bilmiyorum, !?

zaten iyi bir başlangıç ​​noktası

es için TOT Nums bir azından karakterlerinizle bekleyin .: 3 (yani çoğu durumda arama mysql için bir dakika sözcük uzunluğu ise) sonra olabilir kömürleşir sonradır DB veya json dosyanızı aramaya başlayın!

Daha önce .. vb FILTERING vb gibi PHP veya başkalarına sert iş vermek yanıtının geri göndermesi gerekir düşünün!

btw i jQuery UI http://jqueryui.com/demos/autocomplete/ yeni otomatik tamamlama eklentisi baktınız mı brandspankingnew