知问前端——自动补全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:;
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:;
}
#header .header_main {
width: 800px;
height: 40px;
margin: 0 auto;
}
#header .header_main h1 {
font-size: 20px;
margin:;
padding:;
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:;
}
#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("自动补齐，打开！");
});
知问前端——自动补全UI的更多相关文章
- 第一百八十一节，jQuery-UI，知问前端--自动补全 UI--邮箱自动补全
jQuery-UI,知问前端--自动补全 UI--邮箱自动补全 学习要点: 1.调用 autocomplete()方法 2.修改 autocomplete()样式 3.autocomplete()方法 ...
- 第一百七十七节，jQuery，知问前端--概述及 jQuery UI
jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一．项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能 ...
- 知问前端——概述及jQuery UI
知问系统,是一个问答系统.主要功能:即会员提出问题,会员回答问题.目前比较热门的此类网站有:知乎http://www.zhihu.com.百度知道http://zhidao.baidu.com等.这里 ...
- 知问前端——日历UI(三)
datepicker日期选择选项 属性 默认值/类型 说明 minDate 无/对象.字符串或数值 日历中可以选择的最小日期 maxDate 无/对象.字符串或数值 日历中可以选择的最大日期 defa ...
- 知问前端——日历UI(二)
datapicker外观选项 属性 默认值/类型 说明 disabled false/布尔值 禁用日历 numberOfMonths 1/数值 日历中同时显示的月份个数.默认为1,如果设置3就同时显示 ...
- 知问前端——日历UI(一)
日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); ...
- 第一百八十二节，jQuery-UI，知问前端--日历 UI
jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...
- 基于Jquery UI的autocompelet改写，自动补全控件，增加下拉选项，动态设置样式，点击显示所有选项，并兼容ie6+
Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...
- 知问前端——对话框UI(一)
对话框(dialog),是jQuery UI非常重要的一个功能.它彻底的代替了JavaScript的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 开启多个dialog 我们 ...
随机推荐
- win10 无法修改默认程序 默认打开方式的解决方法
此时是2018年11月24日 win10 pro 64位 版本是1803 具体版本号是17134 情景: 我的状况是.json文件的默认打开方式被新安装的应用霸占了,然后无论是通过“右键-属性-更改 ...
- Java的框架是什么意思
框架就是一些类和接口的集合,通过这些类和接口协调来完成一系列的程序实现. JAVA框架可以分为三层:表示层,业务层和物理层.框架又叫做开发中的半成品,它不能提供整个WEB应用程序的所有东西,但是有了框 ...
- 树莓派i2c功能
默认i2c是关闭的,用raspi-config 命令,会弹出一个配置框图 选择enable i2c就可以了 reboot之后 没有在/dev/目录下发现i2c-x的设备,这个时候需要做以下操作 1.添 ...
- c free 使用MSDN library定制
为了不使用vc6但是还要使用visual assist的各种自动功能,决定使用c free ,但是怎么调用微软的MSDN library呢,我目前使用的版本是MSDN 1.5精简版bing自动翻译的. ...
- HDFS分布式集群
一.HDFS伪分布式环境搭建 Hadoop分布式文件系统(HDFS)被设计成适合运行在通用硬件(commodity hardware)上的分布式文件系统.它和现有的分布式文件系统有很多共同点.但同时, ...
- C指针分析详解
局部变量和全局变量初始化区别: 局部变量,在未初始化情况下,初值为随机值.C规范对该初值并没有做规定,具体实现由编译器决定.如VC/VS等编译器,会将初始值值为0xCCCCCCCC, 而GCC等编译器 ...
- C++学习---- static关键字用法总结
static: 作用:存储在静态数据区的变量会在程序刚开始运行时就完成初始化,也是唯一的一次初始化.共有两种变量存储在静态存储区:全局变量和static变量. 1.隐藏:(静态全局变量和静态函数) ...
- JavaWeb 基于Session的用户登陆注销实现
通过Session来存储用户的部分登陆信息来验证用户是否在线,这应该时最容易实现的一种Web端方案,本文以SSM(Spring.SpringMVC.myBatis)框架为载体,来具体实现这套登陆系统. ...
- Linux SPI总线和设备驱动架构之三：SPI控制器驱动
通过第一篇文章,我们已经知道,整个SPI驱动架构可以分为协议驱动.通用接口层和控制器驱动三大部分.其中,控制器驱动负责最底层的数据收发工作,为了完成数据的收发工作,控制器驱动需要完成以下这些功能:1. ...
- 软工实践Beta冲刺(3/7)
队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 1.界面的修改与完善 展示GitHub当日代码/文档签入记 ...