jQuery 基础教程jQuery 简介jQuery 安装jQuery 语法jQuery 选择器jQuery 事件jQuery 隐藏和显示jQuery 效果 -淡入淡出jQuery 效果 -滑动jQuery 效果 animate() 方法jQuery 停止动画 stop() 方法jQuery 动画 callback 回调方法jQuery 方法链 ( chaining )jQuery 获取HTML元素的内容属性jQuery 设置HTML元素的内容属性jQuery - 添加元素jQuery - 删除元素jQuery - 获取并设置 CSS 类jQuery css() 方法jQuery 尺寸jQuery 遍历jQuery 遍历 祖先元素jQuery 遍历 后代jQuery 遍历 - 同胞 ( siblings )jQuery 遍历-过滤jQuery AJAX 简介jQuery AJAX load() 方法jQuery AJAX get() 和 post() 方法jQuery - noConflict() 方法jQuery Validate 验证插件jQuery UI Accordion 折叠菜单jQuery UI Autocomplete 插件jQuery Growl 消息提醒jQuery Password ValidationjQuery Prettydate 友好日期插件jQuery TooltipjQuery 树型菜单插件(Treeview)
jQuery UI Autocomplete 插件
jquery UI Autocomplete 插件根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择
通过给 Autocomplete 字段焦点或者在其中输入字符，插件开始搜索匹配的条目并显示供选择的值的列表
通过输入更多的字符，用户可以过滤列表以获得更好的匹配
目前版本是 1.12.1
效果图示
官网
https://jqueryui.com/autocomplete/
引入 jQuery UI css 样式表
<link rel="stylesheet" href="https://cdn.staticfile.org/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css" />
引入 JavaScript 脚本文件
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.min.js"></script>
html 代码
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
JavaScript 代码
$(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
});
});