javascript - 搜索框中的单词建议

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 来保存 map :

@ApplicationScoped
class WordSuggestion {

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

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

用户输入完整单词“book”后，我想建议 3 个候选词“book”、“booking”和“booked”，其方式与上述建议类似。一个区别是，对于浏览器缓存建议(如果有)，一旦用户输入一个字符，建议就会启动；但是，就我而言，我希望用户输入完整的单词，即“book”，然后开始建议。最终，我也希望用户一开始输入，建议就开始，但我觉得这可能是第一种类型。

如何在我的搜索框中实现此目的？我正在使用 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
});

});