利用HTML5与jQuery技术创建一个简单的自动表单完成
谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项。然而今天我要寻找一个替代的解决方案。由DevBridge开发的jQuery Autocomplete插件有确切的功能，我觉得非常有吸引力。你在打字的时候，结果将出现在下拉菜单底部，自动突出显示的词语。本教程简单介绍了通过加载JavaScript数组的内容运行这个插件。从后端文件加载Ajax内容或者从数据库中加载文本内容都是可行的，在本教程中，更容易使用本地数据。查看以下演示，了解这个插件 吧。
创建页面
首先下载jQuery Autocomplete插件，这里使用的是压缩后的版本，以及最新的jQuery脚本的副本。因为我在JavaScript数组里保留了所有选择项，于是将自定义脚本移动到了另一个单独的文件中。
<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Input Autocomplete Suggestions Demo</title> <link rel="shortcut icon" href="http://designshack.net/favicon.ico"> <link rel="icon" href="http://designshack.net/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="style.css"> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script> <script type="text/javascript" src="js/currency-autocomplete.js"></script> </head>
安装过程并不难，所有HTML都是通用的，你可以在页面中执行任何类型的搜索设计，结果都将正常工作。我使用外容器，ID #searchfield，整体格式置于中央。没有提交按钮，但结果将自动出现在输入的动态文字段下方。
<div id="content"> <h1>World Currencies Autocomplete Search</h1> <p>Just start typing and results will be supplied from the JavaScript. Check out <a href="https://github.com/devbridge/jQuery-Autocomplete">jQuery Autocomplete</a> on Github.</a></p> <div id="searchfield"> <form><input type="text" name="currency" class="biginput" id="autocomplete"></form> </div><!-- @end #searchfield --> <div id="outputbox"> <p id="outputcontent">Choose a currency and the results will display here.</p> </div> </div><!-- @end #content -->
我们可以通过使用ID #autocomplete定义目标段落，不需要多余的HTML，因为所有的选择项都将以JS代码呈现。另外一个有趣的段落是使用ID #outputcontent。在这段里我们可以放置用户选项。通常情况下，是将用户重新定向到一个搜索页面上，或者转到主页面本身。
利用CSS
在这里我不赘述细节了，但要注意每个选择功能项的CSS样式设计，来搭配主要输入区域。边框和内容样式在Design Shack搜索栏中有详细描述，可以直接借鉴。每个选项样式是基于默认代码的，我已经复制到我的样式表里了。
.autocomplete-suggestions { border: 1px solid #999; background: #fff; cursor: default; overflow: auto; } .autocomplete-suggestion { padding: 10px 5px; font-size: 1.2em; white-space: nowrap; overflow: hidden; } .autocomplete-selected { background: #f0f0f0; } .autocomplete-suggestions strong { font-weight: normal; color: #3399ff; } 如 果你想保持在一个单独的样式表，它仍然通过加载就行了。不过我尝试了对资源进行整合，从而减少浏览器发出的HTTP请求。头两类是针对整个弹出选择行，以 及每个内部选择行。你可以把它们的风格改造成任何适合你网站的样式。伴随CSS还有精心挑选的元素类，用于突出显示已经由用户输入的文本内容。
#searchfield { display: block; width: 100%; text-align: center; margin-bottom: 35px; } #searchfield form { display: inline-block; background: #eeefed; padding: 0; margin: 0; padding: 5px; border-radius: 3px; margin: 5px 0 0 0; } #searchfield form .biginput { width: 600px; height: 40px; padding: 0 10px 0 10px; background-color: #fff; border: 1px solid #c8c8c8; border-radius: 3px; color: #aeaeae; font-weight:normal; font-size: 1.5em; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } #searchfield form .biginput:focus { color: #858585; } 无 论你怎样设计，搜索区域本身不会有什么不一样的问题。jQuery Autocomplete插件适合任意宽度的搜索区域，所有选择项都能以同样的布局整洁排列呈现出来。我的设计确实占用了大量页面上的空间，但这个插件能 帮助改善修复这个不完美的地方，而我不需要自定义太多内容。
实现自动完成
如果你使用的是后端Ajax调用来获取数据结 果，那 么你需要执行自己的搜索功能了。jQuery Autocomplete识别某些可响应数据，例如XML/JSON，然后由PHP, Rails, Python, ASP.NET等返回。因此，通常情况是通过搜索你的数据库表中的条目，并拉出所有相关站点和它们的网址，然后把列表返回到你的浏览器。我用 JavaScript所创建的条目行是世界各地主要货币，当你输入国家或者货币名字的时候，你会看到一个选择项目清单从数组直接拉出。我复制了一小部分内 容来演示它是如何完成的。
$(function(){ var currencies = [ { value: 'Afghan afghani', data: 'AFN' }, { value: 'Albanian lek', data: 'ALL' }, { value: 'Algerian dinar', data: 'DZD' }, { value: 'European euro', data: 'EUR' }, { value: 'Angolan kwanza', data: 'AOA' }, { value: 'East Caribbean dollar', data: 'XCD' }, ... { value: 'Vietnamese dong', data: 'VND' }, { value: 'Yemeni rial', data: 'YER' }, { value: 'Zambian kwacha', data: 'ZMK' }, { value: 'Zimbabwean dollar', data: 'ZWD' }, ]; 在jQuery运 行你自定义功能之前，以下内容还需要完成。我选择的是保持阵列和自定义函数调用存储在同一个JS文件中。不过 你可以选择独立的函数数据，将它们移动到不同的两个文件。现在自动完成插件只需要少量的默认代码。我复制了模板以及在线演示，你可以查看我用相同的参数能 够做到哪些。
$('#autocomplete').autocomplete({ lookup: currencies, onSelect: function (suggestion) { // some function here } }); // setup autocomplete function pulling from currencies[] array $('#autocomplete').autocomplete({ lookup: currencies, onSelect: function (suggestion) { var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value + ' <br> <strong>Symbol:</strong> ' + suggestion.data; $('#outputcontent').html(thehtml); } }); 查找参数仅用于本地数据，并且我们的目标是一个数组时。每当用户选择一个选项时onSelect将触发一个新的函数。以下的在线演示中我们简单的创建一个新的HTML字符串输出选定的名字和值。请注意，下面的演示只是最基本的例子，你还可以加以扩展。到jQuery Autocomplete documentation上面看看有什么关于其他参数的好点子。我只是略懂皮毛，那些JavaScript开发人员能把函数调用例子放在一起。我想说的是这个插件很好获得，大家都可以使用，在必要情况下，甚至能使用静态数据。
后续
我 本人非常推荐这个插件，之前我已经使用了几个不同的解决方案，但都没有这个插件好用。通过加载页面结果呈现选项与直接搜索结果两者之间有很大区别（比如 Google Instant）。在使用这款插件之前，首先要确保你有一个很好的计划，构建工作性能良好的用户界面。jQuery Autocomplete插件完全免费的，所有代码都在MIT license提供出来了。
via 极客标签