2011-08-04 46 views
4

我有一個搜索使用jquery ui自動完成這很好。目前,我預加載了一個城市和國家的json列表,以便加載速度快,無需輪詢服務器。不過,現在,我想添加到我的自動搜索具體名稱的地方,即在我的情況下,酒店,餐館等。jquery ui自動填充複合搜索與結果前和結果

我的問題是我應該只是拋開預裝的城市和國家名單,並做普通的香草ajax數據庫查詢?q =當他們鍵入時,或者是可能的,並且它們之間有某種混合會有用。 IE預加載列表,直到他們達到一定數量的字符或少於5個結果?

它會節省加載時間還是隻是頭痛?如果是這樣,我應該怎麼做呢?

我最初把它當作ajax查詢,但切換到預加載的json來加速它。完整的城市和國家名單很少,但是名單很大。 99.9%的人會搜索地點而不是特定地點。

回答

4

你將如何實現這一目標:

你可以通過傳遞函數來自動完成的source選項完成這樣的事情。在該功能中,您將執行一些邏輯,以確定是否需要使用AJAX調用或只過濾在客戶端的數據:

$("#tags").autocomplete({ 
    source: function(request, response) { 
     // This is how autocomplete finds matching results by default: 
     var results = $.ui.autocomplete.filter(common, request.term); 

     if (results.length < 5) { 
      // Perform an ajax call. 
      // In the success method, call response(results) 
     } else { 
      response(results); 
     } 
    } 
}); 

你的想法都使用兩個來源「混合」自動完成很有趣。但是,在測試解決方案時,我遇到了潛在的可用性問題。通常,使用這種類型的控件時,當您輸入內容時,您會希望減少的結果數

例如:讓說你的本地源陣列看起來像這樣:

['jquery', 'jquery-ui', 'jquery-ajax', 'jquery-plugins'] 

而且使用後顯示,比方說,5個字符被鍵入多個結果戰略。在用戶輸入j-q-u-e-r-y之後,鍵入y將觸發AJAX調用,使用更多結果填充列表,這對用戶而言可能並不簡單,具體取決於您的用例。

例子:http://jsfiddle.net/andrewwhitaker/wSBa3/

我認爲當你設置的結果數可能來自服務器返回的一些限制這個變得更好。如果您在發生AJAX調用之前將此值與最小結果數同步,則交互似乎不那麼時髦。事實上,這個例子使這個概念更合理的對我說:

例子:http://jsfiddle.net/andrewwhitaker/NxELC/


是否值得呢?

它會節省加載時間還是隻是頭痛?

也許兩個!

我認爲這實際上取決於資源密集型查詢的方式,我們討論的數據量以及如何維護這樣的解決方案。我無法真正推測前兩種選擇,但我會說,維護兩個列表可能會導致維護問題。這個問題取決於你使用的服務器端技術。我認爲如果你做得對,你不會有任何麻煩。

對於漫長的答案提前道歉,但我希望它有幫助。