jQuery的高效AutoSuggest？

我正在努力構建一個jQuery AutoSuggest插件，它受到了蘋果公司的關注。jQuery的高效AutoSuggest？

這裏是通用代碼：

$(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)"); 

      } 
     }); 
    } 
});

我要解決好&典雅的問題，是不是殺死服務器。現在，上面的代碼每次鍵入一個鍵時都會碰到服務器，並且不會等待您基本完成鍵入。解決這個問題的最好方法是什麼？ A.殺死先前的AJAX請求？ B.一些類型的AJAX緩存？ C.添加某種類型的延遲，只在提交.AJAX（）時停止輸入300毫秒左右？

來源

2010-03-14 AnApprentice

你看着從jQuery UI的http://jqueryui.com/demos/autocomplete/新的自動完成插件的人嗎？ – PetersenDidIt 2010-03-14 19:09:15

jQuery不是首字母縮寫詞。 – SLaks 2010-03-14 19:13:28

@nobosh：我是在實現了高效的自動提示而不殺死服務器之後，如果你能夠提出一些你認爲它有效的東西，你會分享示例服務器端代碼嗎？ - 謝謝。 – 2010-04-29 16:00:04

使用try Ben Alman's Throttle & Debounce plugin

，直到用戶完成讓你「延遲」的事情。

有關如何使用它檢查了一個例子他example of debouncing with a pretend autocomplete

您的代碼將基本成爲

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

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

你會注意到，我刪除了你的背景圖片CSS並用addClass/removeClass替換它們。更容易管理css文件中的css東西。

來源

2010-03-14 19:10:55 PetersenDidIt

聽起來很有意思，但這是很多代碼，你不覺得嗎？ – AnApprentice 2010-03-14 19:19:47

不會調用0.7kb很多代碼http://github.com/cowboy/jquery-throttle-debounce/raw/v1.1/jquery.ba-throttle-debounce.min.js – PetersenDidIt 2010-03-14 19:31:10

是的。你會如何建議在上面的代碼上實現Throttle？在這方面，我沒有看到如何利用插件。 thxs – AnApprentice 2010-03-14 23:25:26

我會選擇C的變體。不要等到用戶停止輸入，而是在第一次擊鍵之後等待一段時間（200ms？）。然後，在那段時間之後，在很多情況下，您會收到額外的擊鍵，然後使用鍵入的字符來獲取自動提示。如果在提交請求後按下另一個鍵，您將再次開始計數。

你也應該做一些緩存;人們將使用退格鍵，您將不得不再次顯示名單。

來源

2010-03-14 19:13:01

Thxs，你能提供一些關於如何實現延遲和緩存的技巧嗎？ – AnApprentice 2010-03-14 19:17:20

你可能想看看這裏的jQuery插件：http://code.google.com/p/jquery-autocomplete/ 它支持像delay和cacheLength – 2010-03-15 11:18:14

自動填充插件有一個超時選項，您可以將其設置爲執行此操作。

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

來源

2010-03-14 19:38:35

我不知道，DB你使用的是什麼或者是你使用硬編碼的文件！？

反正一個很好的出發點是等待至少TOT NUMS字符的爲

ES：3（即在大多數情況下，搜索MySQL的一分鐘字lenght）煤焦後，那麼你就可以開始搜索你的數據庫或json文件！

我認爲你必須給PHP或其他人的艱苦工作，如FILTERING等等。之前發送迴應！

順便說一句，我認爲最好的AutoSuggest之一是brandspankingnew

來源

2010-03-14 19:56:25

jQuery的高效AutoSuggest？

回答

相關問題