利用HTML5与jQuery技术创建一个简单的自动表单完成

 来源：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 极客标签

 

阅读原文：利用HTML5与jQuery技术创建一个简单的自动表单完成