搜索框中的单词建议

Question

在 google 的搜索框中，当用户键入部分术语时，将弹出一个与该术语部分匹配的术语列表，用户可以从中选择一个。事实证明这很方便。请看附件：

这是通过浏览器缓存完成的吗？我想是的，因为我在我的本地机器上用我自己的实验应用程序观察到了这一点。请参阅下面的附件：

当我输入字母 'a' 时，弹出三个单词，但我的应用程序非常简单，前面只有一个 JSF 中的 h:form，特别是有很多后端支持这个。所以，我认为这三个词一定是浏览器的缓存提示的，因为我之前输入过它们。有人可以确认吗？

现在，如果我想要与建议类似但不同的东西。建议的术语不是通过浏览器的缓存建议的，而是通过后台 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");
   }
}

在用户键入完整的单词 "book" 后，我希望以与以上建议。一个区别是，对于浏览器缓存建议（如果有），只要用户键入一个字符，建议就会开始；但是，就我而言，我希望用户输入完整的单词，即 "book"，然后开始建议。最后，我也希望用户一开始输入，建议就开始，但我觉得这可能是第一种类型。

如何在我的搜索框中实现这一点？我正在使用 JEE、JSF、JavaScript、html。

Answer 1

使用 JQuery 自动完成插件，例如 EasyAutocomplete

Answer 2

关注这个：

<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
});

});

搜索框中的单词建议

Word suggestion in search box

javascript

java

jsf

search

jquery-autocomplete