搜索框中的單詞建議

Question

在谷歌的搜索框中，當用戶輸入一個部分詞條時，與詞語部分匹配的詞條列表彈出，用戶可以從中選擇一個詞條。事實證明這很方便。請參閱附件：

這是通過瀏覽器的緩存做了什麼？我想是的，因爲我用我自己的實驗應用程序在本地機器上觀察到了這一點。請參閱以下附件：

當我鍵入字母「A」，三個字彈出，但我的應用程序是非常簡單的，只啊：形式在前面JSF，其中大部分後臺支持這一尤其是。所以，我認爲這三個詞必須由瀏覽器的緩存建議，因爲我之前輸入了它們。有人能證實這一點嗎？

現在，如果我想要類似的建議，但不同。建議的條款不是通過瀏覽器的緩存建議的，而是通過後臺bean提供的。

<h:form id="wordForm"> 

    <h:inputText id="word" value="#{wordController.word}" />       
    <h:commandButton id="search" value="search!" 
     action="#{wordController.search}" /> 
</h:form> 

舉例來說，如果我有一個後端bean保存地圖：

@ApplicationScoped 
class WordSuggestion { 

    ... 
    private Map<String, String> wordSuggestions; 

    public void initialize() { 
     wordSuggestions.put("book", "books"); 
     wordSuggestions.put("book", "booking"); 
     wordSuggestions.put("book", "booked"); 
    } 
} 

用戶鍵入完整的單詞「書」後，我想3名候選人「書」，「預訂「和」預訂「以與上述建議類似的方式提出。一個區別是，對於瀏覽器緩存建議（如果是），只要用戶鍵入一個字符，建議開始;然而，就我而言，我希望用戶輸入完整的單詞，即「書」，然後開始建議。最終，我也希望用戶一旦開始輸入，就會開始建議，但我認爲這可能是第一種類型。

如何在我的搜索框中實現此目的？我正在使用JEE，JSF，JavaScript，html。

Answer 1

關注這個：

<input type='text' title='Tags' id='tags' /> 

$(document).ready(function() { 

var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"]; 

$("#tags").autocomplete({ 
    source: aTags 
}); 

}); 

Answer 2

使用一個jQuery自動完成插件像EasyAutocomplete