使用 Javascript 创建动态搜索框自动完成和自动提交答案

【问题标题】：Create dynamic search box autocomplete and auto submit with Javascript使用 Javascript 创建动态搜索框自动完成和自动提交
【发布时间】：2017-07-24 22:56:03
【问题描述】：

编辑** 我只是在寻找关于如何最好地创建动态搜索框的概述或大图。

我想用 Javascript 创建一个动态搜索框。搜索框会将建议显示为用户类型（自动完成功能），一旦用户选择建议，它将自动提交到结果页面（onchange 功能？）。这就像谷歌搜索框。做这个的最好方式是什么？目前我正在使用 HTML datalist、onchange 函数并以某种方式将事件处理程序链接到新的结果页面。

谢谢。

【问题讨论】：

欢迎来到 Stack Overflow！您似乎在要求某人为您编写一些代码。 Stack Overflow 是一个问答网站，而不是代码编写服务。请see here学习如何写出有效的问题。
我认为您可能需要进行一些研究，因为您实际上并没有特定的编码问题。也许谷歌：创建一个动态搜索框
大家好实际上我正在寻找全局，如何最好地处理这个问题。细节和代码本身我会处理的:)

标签： javascript

【解决方案1】：

将 JQuery 与 AutoSuggest 插件结合使用。

http://docs.jquery.com/Plugins/autocomplete

包含 JS 库（参见上面的文档），然后在 HTML 中执行此操作：

<input type="text" class="autocomplete" name="n1" />
<input type="text" class="autocomplete" name="n2" />
<input type="text" class="autocomplete" name="n3" />
<input type="text" class="autocomplete" name="n4" />

然后在您的 Javascript 中为 CSS 类添加一个自动完成功能：

var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$(".autocomplete").autocomplete(data);

【讨论】：