jQuery实现用户输入自动完成功能
利用jQuery UI中Auto-complete插件实现输入自动完成功能，大家在使用诸如淘宝、京东等电商平台搜索商品时，往往只要输入商品的一些特殊字符，就可以显示出和该字符相近的列表菜单，用户使用鼠标或者键盘方向键就可以快速选择，实现了很好的用户体验。
1.最简单的用户输入自动完成
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="external nofollow" > <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> $(function() { //定义并初始化字典库数据源集合 var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; //自动完成插件函数 $( "#tags" ).autocomplete({ //自动完成字典库数据源 source: availableTags }); }); </script> </head> <body> <div class="ui-widget"> <label for="tags">请输入: </label> <input id="tags"> </div> </body> </html>
2 使用远程数据源自动完成
Auto-complete插件不光可以实现本地数据源的自动完成，也可以读取远程的数据源，列如实现从服务器端读取数据源信息。
通过将服务器数据缓存到浏览器中，获取的数据源首先保存在cache变量中。
$(function() {
//自定义缓存变量
var cache = {};
//自动完成插件函数
$("#tags").autocomplete({
//定义用户最少输入的字符数
minLenght: 2,
source: function(request, response){//定义远程获取数据源函数
var term = request.term;//定义用户请求信息变量
if(term in cache) {//判断请求数据是否存在缓存中
response(cache[term]);//真，从缓存中读取数据
return;
}
$.getJSON('data.json', request, function(data, Status, xhr) {
cache[term] = data.result;//缓存远程数据
response(data.result);
});
}
});
});
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
我想在表单中使用jQuery.AutoComplete.js插件进行输入。我想在客户端进行搜索，不能使用Ajax。但我不想在数组中使用一些简单的基于“包含”的搜索算法。我要做的是用javascript编写一个自定义搜索函数，对结果进行搜索和排序。这可能吗？怎么可能？ 谢谢你抽出时间。
-
本文向大家介绍如何禁用HTML输入字段的自动完成功能？，包括了如何禁用HTML输入字段的自动完成功能？的使用技巧和注意事项，需要的朋友参考一下 例 输出结果 上面的代码将产生以下输出- 提交表单一次后在上述字段中键入内容-
-
问题内容： 我正在尝试实现自动补全功能，但是找不到在Swift中可用的示例。下面，我打算转换Ray Wenderlich的自动完成教程 和2010年的示例代码。最后，代码进行了编译，但是没有显示包含可能完成的表格，而且我没有经验来了解为什么它未被隐藏shouldChangeCharactersInRange。 问题答案： 用下面的内容替换您的函数内容。希望对您有帮助。
-
问题内容： 以下是我尝试使用带有AJAX源的jQuery自动完成功能的尝试。 我有多个问题，希望能帮助许多正在努力理解使用AJAX源实现自动完成的正确方法的人。 1） 这是做什么的？为什么需要它。 2）以什么格式返回数据？我意识到数据是JSON格式的，但是有什么意义呢？是否有必要这样做？有好处吗？ 3a）使用和时，是否必须返回上述数据？ 3b）或者根据上述数据，如何正确使用appendTo和ren
-
根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。 如需了解更多有关 autocomplete 部件的细节，请查看 API 文档 自动完成部件（Autocomplete Widget）。 本章节使用到 search.php 下载。 默认功能 当您在输入域中输入时，自动完成（Autocomplete）部件提供相应的建议。在本实例中，提供了编程语言的建议选项，您可以输入 "ja" ，可
-
问题内容： 任何人都可以给我完整的步骤来使用jquery-ui自动完成功能。我正在使用grails 2.0.1。 我需要一个完整的示例，包括控制器和视图的代码。 提前致谢。 问题答案： 首先，您需要将main.gsp（在头部）添加到行中 插件将自动下载。 对于完整的示例，您可以使用此链接 http://jay-chandran.blogspot.com/2011/09/using-grails-w