知问前端——自动补全UI
自动补全（autocomplete），是一个可以减少用户输入完整信息的UI工具。一般在输入邮箱、搜索关键字等，然后提取出相应完整字符串供用户选择。
调用autocomplete()方法
var host = ['aa', 'aaaa', 'aaaaaa', 'bb']; $("#email").autocomplete({ source:host });
修改autocomplete()样式
由于autocomplete()方法是弹窗，然后鼠标悬停的样式，我们通过Firebug想获取到悬停时背景的样式，可以直接通过jquery.ui.css里面找相应的CSS。
/* 邮箱自动补全的悬停背景色 */ .ui-menu .ui-state-focus { background:url(img/ui_header_bg.png); } /* 邮箱自动补全，悬停时的字体颜色 */ .ui-menu { color: #666; }
autocomplete()方法的属性
自动补全方法有两种形式：
1.autocomplete(options)，options是以对象键值对的形式传参，每个键值对表示一个选项
2.autocomplete('action', param)，action是操作对话框方法的字符串，param则是options的某个选项。
autocomlete外观选项
| 属性 | 默认值/类型 | 说明 |
| disabled | false/布尔值 | 设置为true，将禁止显示自动补全 |
| source | 无/数组 | 指定数据源，可以是本地的，也可以是远程的 |
| minLength | 1/数值 | 默认为1，触发补全列表最少输入字符数 |
| delay | 300/数值 | 默认为300毫秒，延迟显示设置 |
| autoFocus | false/布尔值 | 设置为true时，第一个项目会自动被选定 |
index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="index.js"></script> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> <div class="header_main"> <h1>知问</h1> <div class="header_search"> <input type="text" name="search" class="search" /> </div> <div class="header_button"> <button id="search_button">查询</button> </div> <div class="header_member"> <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a> </div> </div> </div> <div id="reg" title="会员注册"> <p> <label for="user">账号：</label> <input type="text" name="user" class="text" id="user" title="请输入账号，不少于2位！"></input> <span class="star">*</span> </p> <p> <label for="pass">密码：</label> <input type="password" name="pass" class="text" id="pass" title="请输入密码，不少于6位！"></input> <span class="star">*</span> </p> <p> <label for="email">邮箱：</label> <input type="text" name="email" class="text" id="email" title="请输入正确的邮箱！"></input> <span class="star">*</span> </p> <p> <label>性别：</label> <input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">男</label></input> <input type="radio" name="sex" id="female" value="female"><label for="female">女</label></input> </p> <p> <label for="date">生日：</label> <input type="text" name="date" readonly="readonly" class="text" id="date"></input> </p> </div> </body> </html>
style.css：
body { margin: 40px 0 0 0; padding: 0; font-size: 12px; font-family: 宋体; background: #fff; } /* 更改jQuery UI主题的对话框header的背景 */ .ui-widget-header { background: url(img/ui_header_bg.png); } /* 按钮正常状态的背景 */ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background:url(img/ui_header_bg.png); } /* 按钮点击状态的背景 */ .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background:url(img/ui_white.png); } /* 工具提示的文本颜色 */ .ui-tooltip { color: #666; } /* 邮箱自动补全的悬停背景色 */ .ui-menu .ui-state-focus { background:url(img/ui_header_bg.png); } /* 邮箱自动补全，悬停时的字体颜色 */ .ui-menu { color: #666; } #header { width: 100%; height: 40px; background: url(img/header_bg.png); position: absolute; top:0; } #header .header_main { width: 800px; height: 40px; margin: 0 auto; } #header .header_main h1 { font-size: 20px; margin: 0; padding: 0; color: #666; line-height: 40px; float: left; padding: 0 10px; } #header .header_search { padding: 6px 0 0 0; float: left; } #header .header_search .search { width: 300px; height: 24px; border: 1px solid #ccc; background: #fff; color: #666; font-size: 14px; text-indent: 5px; } #header .header_button { padding: 5px; float: left; } #header .header_member { float: right; line-height: 40px; color: #555; font-size: 14px; } #header .header_member a { text-decoration: none; font-size: 14px; color: #555; } #reg { padding: 15px 0 0 15px; } #reg p { margin: 10px 0; padding: 0; } #reg p label { font-size: 14px; color: #666; } #reg .star { font-size: 14px; color: red; } #reg .text { border-radius: 4px; border: 1px solid #ccc; background: #fff; width: 200px; height: 25px; line-height: 25px; text-indent: 5px; font-size: 13px; color: #666; }
jQuery代码：
var host = ['aa', 'aaaa', 'aaaaaa', 'bb']; $("#email").autocomplete({ source:host, //disabled:true, //minLength:2, minLength:0, //触发整个补全列表 delay:0, autoFocus:true });
autocomplete页面位置选项
| 属性 | 默认值/类型 | 说明 |
| position | 无/对象 | 使用对象的键值对赋值，有两个属性：my和at表示坐标。my是以目标点左上角为基准，at以目标点右下角为基准 |
jQuery代码：
var host = ['aa', 'aaaa', 'aaaaaa', 'bb']; $("#email").autocomplete({ source:host, //感觉没什么鸟用 position:{ my:"left center", at:"right center" } });
autocomplete()方法的事件
除了属性设置外，autocomplete()方法也提供了大量的事件，这些事件可以给各种不同状态时提供回调函数。
autocomplete()事件选项
| 事件名 | 说明 |
| create | 当自动补全被创建时会调用create方法，该方法有两个参数(event, ui)。此事件中的ui参数为空 |
| open | 当自动补全被显示时，会调用open方法，该方法有两个参数(event, ui)。此事件中的ui参数为空 |
| close | 当自动补全被关闭时，会调用close方法，该方法有两个参数(event, ui)。此事件中的ui参数为空 |
| focus | 当自动补全获取焦点时，会调用focus方法，该方法有两个参数(event, ui)。此事件中的ui有一个子属性对象item，分别有两个属性：label，补全列表显示的文本；value，将要输入框的值。一般label和value值相同 |
| select | 当自动补全被选定时，会调用select方法，该方法有两个参数(event, ui)。此事件中的ui有一个子属性对象item，分别有两个属性：label，补全列表显示的文本；value，将要输入框的值。一般label和value值相同 |
| change | 当自动补全失去焦点且内容发生改变时，会调用change方法，该方法有两个参数(event, ui)。此事件中的ui参数为空 |
| search | 当自动补全搜索完成后，会调用search方法，该方法有两个参数(event, ui)。此事件中的ui参数为空 |
| response | 当自动补全搜索完成后，在菜单显示之前，会调用response方法，该方法有两个参数(event, ui)。此事件中的ui参数有一个子对象content，他会返回label和value值，可通过遍历了解。 |
jQuery代码：
var host = ['aa', 'aaaa', 'aaaaaa', 'bb']; $("#email").autocomplete({ source:host, focus:function(e, ui) { //将鼠标慢慢移到补全列表时触发 //alert("获取焦点！"); //alert(ui.item.label); ui.item.value = 123; }, select:function() { alert("选定一个项目！"); }, change:function() { //当自动补全失去焦点且内容发生改变时触发 alert("改变！"); }, search:function() { alert("搜索完毕！"); }, response:function(e,ui) { alert("搜索完毕！"); alert(ui.content[1].label); //aaaa } });
autocomplete('action',param)方法
| 方法 | 返回值 | 说明 |
| autocomplete('close') | jQuery对象 | 关闭自动补齐 |
| autocomplete('disable') | jQuery对象 | 禁用自动补齐 |
| autocomplete('enable') | jQuery对象 | 启用自动补齐 |
| autocomplete('widget') | jQuery对象 | 获取自动补全提示的jQuery对象 |
| autocomplete('search',value) | jQuery对象 | 在数据源获取匹配的字符串 |
| autocomplete('option', param) | 一般值 | 获取options属性的值 |
| autocomplete('option', param, value) | jQuery对象 | 设置options属性的值 |
jQuery代码：
var host = ['aa', 'aaaa', 'aaaaaa', 'bb']; $("#email").autocomplete({ source:host, minLength:0 //触发整个补全列表 }); $("#email").autocomplete("search",""); //匹配整个补全列表
autocomplete中使用on()
在autocomplete的事件中，提供了使用on()方法处理的事件方法。
on()方法触发的自动补全事件
| 事件名称 | 说明 |
| autocompleteopen | 显示时触发 |
| autocompleteclose | 关闭时触发 |
| autocompletesearch | 查找时触发 |
| autocompletefocus | 获得焦点时触发 |
| autocompleteselect | 选定时触发 |
| autocompletechange | 改变时触发 |
| autocompleteresponse | 搜索完毕后，显示之前 |
jQuery代码：
$("#email").on("autocompleteopen",function() {
alert("自动补齐，打开！");
});
