知问前端——自动补全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("自动补齐,打开!");
});
上一篇:【WPF】ListBox GridViewColumn Header 文字换行、文字多行显示


下一篇:erlang反编译