来源：GBin1.com
谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项。然而今天我要寻找一个替代的解决方案。由DevBridge开发的jQuery Autocomplete插件有确切的功能，我觉得非常有吸引力。你在打字的时候，结果将出现在下拉菜单底部，自动突出显示的词语。本教程简单介绍了通过加载JavaScript数组的内容运行这个插件。从后端文件加载Ajax内容或者从数据库中加载文本内容都是可行的，在本教程中，更容易使用本地数据。查看以下演示，了解这个插件 吧。
创建页面
首先下载jQuery Autocomplete插件，这里使用的是压缩后的版本，以及最新的jQuery脚本的副本。因为我在JavaScript数组里保留了所有选择项，于是将自定义脚本移动到了另一个单独的文件中。
......
安装过程并不难，所有HTML都是通用的，你可以在页面中执行任何类型的搜索设计，结果都将正常工作。我使用外容器，ID #searchfield，整体格式置于中央。没有提交按钮，但结果将自动出现在输入的动态文字段下方。
......
我们可以通过使用ID #autocomplete定义目标段落，不需要多余的HTML，因为所有的选择项都将以JS代码呈现。另外一个有趣的段落是使用ID #outputcontent。在这段里我们可以放置用户选项。通常情况下，是将用户重新定向到一个搜索页面上，或者转到主页面本身。
利用CSS
在这里我不赘述细节了，但要注意每个选择功能项的CSS样式设计，来搭配主要输入区域。边框和内容样式在Design Shack搜索栏中有详细描述，可以直接借鉴。每个选项样式是基于默认代码的，我已经复制到我的样式表里了。
.......
.......
查找参数仅用于本地数据，并且我们的目标是一个数组时。每当用户选择一个选项时onSelect将触发一个新的函数。以下的在线演示中我们简单的创建一个新的HTML字符串输出选定的名字和值。请注意，下面的演示只是最基本的例子，你还可以加以扩展。到jQuery Autocomplete documentation上面看看有什么关于其他参数的好点子。我只是略懂皮毛，那些JavaScript开发人员能把函数调用例子放在一起。我想说的是这个插件很好获得，大家都可以使用，在必要情况下，甚至能使用静态数据。
后续
我本人非常推荐这个插件，之前我已经使用了几个不同的解决方案，但都没有这个插件好用。通过加载页面结果呈现选项与直接搜索结果两者之间有很大区别（比如 Google Instant）。在使用这款插件之前，首先要确保你有一个很好的计划，构建工作性能良好的用户界面。jQuery Autocomplete插件完全免费的，所有代码都在MIT license提供出来了。
via 极客标签
相关推荐
本篇文章将详细讲解如何利用jQuery实现自动完成功能，这在网页表单输入中十分常见，能提升用户体验，特别是在用户需要从大量数据中选取时。 首先，自动完成功能的核心在于获取用户输入并根据输入内容实时过滤出匹配...
HTML5和JQuery Mobile是构建移动WebApp的两个关键技术，它们共同为开发者提供了在移动设备上创建交互式、响应式的Web应用的能力。本实例通过一个金融系统的移动端页面演示了这两者的应用，旨在促进学习和理解。 ...
【jQuery购物车自动计算金额表单】是一个基于jQuery技术实现的简单购物车功能，它能够自动计算用户在购物车中选择商品的总价。这个功能在电商网站中非常常见，为用户提供了一个直观的方式来查看他们所选商品的总价值...
本项目“jQuery自动填充表单功能代码.zip”旨在介绍如何利用jQuery UI的Autocomplete组件来实现表单字段的自动填充功能。这个功能常见于搜索引擎、登录表单和任何需要快速输入建议的场景中，能提升用户体验并减少...
它利用了jQuery的事件处理和DOM操作能力，结合自定义的CSS样式和可能的Ajax请求，来创建一个动态的时间选择器。用户在输入框中输入时间相关的文字后，插件会根据预设的格式或规则，展示一列匹配的时间选项供用户选择...
在IT领域，特别是Web开发中，利用jQuery与PHP结合MySQL数据库来实现自动完成（Autocomplete）功能是一种常见的技术方案。这种技术广泛应用于搜索框、表单填写等场景，旨在提升用户体验，通过用户输入的部分信息即时...
HTML5和jQuery Mobile是现代移动应用开发中的两个关键技术，它们共同为构建响应式、交互式的Web应用程序提供了强大的工具。本资源包含两套基于HTML5和jQuery Mobile的模板，可以帮助开发者快速搭建移动应用的界面，...
通过利用jQuery的DOM操作和事件绑定，开发者可以轻松地实现表单的动态切换和验证。 ### 插件概述 该插件的主要目标是创建一个分页滑动的注册流程，每个步骤之间通过平滑的动画过渡。这不仅使界面看起来更专业，也...
5. **Canvas与SVG**：这两种图形绘制技术，可用于创建动态图表、游戏或其他复杂的视觉效果。 **三、学习jQuery Mobile模板** 这个资源包含了多套jQuery Mobile模板，它们是预先设计好的界面布局，可以帮助初学者...
**EditPlus**作为开发工具，对这些技术提供了良好支持，包括代码高亮、自动完成、快捷键定制等功能，使得开发效率大大提升。在编辑HTML5、CSS3和JQuery代码时，利用EditPlus的特性可以更有效地编写和调试代码。 ...
"jquery表单验证特效"这个主题涉及到使用jQuery进行表单验证，这是一种提高用户体验的有效方式，通过实时验证用户输入的数据，确保其正确性和完整性，避免提交无效或错误的信息。 表单验证通常是网页应用程序不可或...
总之，这个压缩包中的代码实例展示了如何结合HTML5的新特性、CSS3的样式与布局技巧，以及jQuery的便捷功能，创建一个美观、功能齐全且响应式的注册表单。通过学习和理解这个示例，开发者可以提升自己的前端开发技能...
"jQuery 自动完成控件"就是这样一个功能，它可以在用户输入时提供预测建议，大大提高了输入效率，尤其适用于搜索框或者表单字段。这个控件主要依赖于jQuery库，通过简单的API调用就能实现自动完成功能。 ### jQuery...
`jQuery-html5Validate`是一个基于jQuery的插件，利用HTML5的内置验证功能，为表单提供简单且强大的验证功能。本篇文章将详细介绍如何使用`jquery-html5Validate`进行页面注册的实现。 首先，我们需要在项目中引入`...
综上所述，"jQuery购物车自动计算金额表单多数据加减商城购物结算"涉及了前端开发中的多项技术，包括jQuery库的运用、动态计算逻辑、表单交互、多数据管理以及用户体验优化。通过熟练掌握这些知识点，可以构建出一个...
一个简单的表单可能如下所示： ```html 文本输入: 选择框: 选项1 选项2 多行文本: <textarea name="textarea" id="textarea"></textarea> 提交" /> ``` ### 数据增强与主题 在jQuery Mobile中...
在这个"JS自动完成 (JQuery做的)"主题中，我们将探讨如何利用jQuery实现一个自动完成的功能。 自动完成，也被称为自动填充或下拉建议，是一种常见的用户界面特性，通常出现在搜索框或者表单中，当用户输入时，系统...
在本文中，我们将深入探讨如何使用jQuery实现一个仿新浪微博的评论和回复交互表单功能。这个功能是网页社交互动中的重要组成部分，它允许...通过熟练掌握这些技巧，你可以创建出一个功能完备且用户体验优秀的评论系统。
"jQuery实现自动补齐"这个主题，主要涉及的是如何利用jQuery来创建一个功能强大的输入框自动完成功能，这在网页表单设计中十分常见，尤其对于搜索框或用户输入数据的场景，可以显著提升用户体验。 自动完成功能通常...