2012-11-21 122 views
0

我試圖建立一個搜索功能,我的PHP網站,提供了一個自動完成功能。我注意到很多人都在推薦jQuery UI自動完成。但我在網上看了一下他們的例子,似乎花了很長時間才能搜索他們的「鳥類」數據庫。我沒有花時間分析sampel代碼,看看有沒有辦法加快速度。但我只是想我會問我應該探索什麼其他方式來完成同樣的事情。
預先感謝您的時間!自動完成搜索選項

回答

0

jQuery UI的自動完成功能非常豐富而且非常棒。如果您擔心使用AJAX從數據庫獲取項目的速度,請考慮預先填充頁面中嵌入的相關信息的JSON數組的方法。然後近乎即時的其相當不錯的(你只需要在頁面上一堆膨脹的)

http://jqueryui.com/autocomplete/#default

<head> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script> 
    $(function() { 
     var availableTags = [ 
      "ActionScript", 
      "AppleScript", 
      "Asp", 
      "BASIC", 
      "C", 
      "C++", 
      "Clojure", 
      "COBOL", 
      "ColdFusion", 
      "Erlang", 
      "Fortran", 
      "Groovy", 
      "Haskell", 
      "Java", 
      "JavaScript", 
      "Lisp", 
      "Perl", 
      "PHP", 
      "Python", 
      "Ruby", 
      "Scala", 
      "Scheme" 
     ]; 
     $("#tags").autocomplete({ 
      source: availableTags 
     }); 
    }); 
    </script> 
</head> 

話雖這麼說,以飛快的速度AJAX可以調用頁面,查詢數據庫並返回數據,完全取決於你的連接和它運行的服務器。 jQueryUI的自動完成速度非常快,我可以爲它保證

看看他們的文檔,你會驚訝於這個庫的靈活性。遠程數據源的例子看起來是這樣的:

<script> 
$(function() { 
    function log(message) { 
     $("<div>").text(message).prependTo("#log"); 
     $("#log").scrollTop(0); 
    } 

    $("#birds").autocomplete({ 
     source: "search.php", 
     minLength: 2, 
     select: function(event, ui) { 
      log(ui.item ? 
       "Selected: " + ui.item.value + " aka " + ui.item.id : 
       "Nothing selected, input was " + this.value); 
     } 
    }); 
}); 
</script> 
+0

嘿!感謝您花時間回覆。我會仔細看看。 – dot

0

同時建立在你的網站自動完成/實時搜索功能,您不妨考慮使用服務,如rockitsearch.com。它是用於構建自動完成/搜索葉端的免費Web服務。