自动补全(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的更多相关文章

  1. 第一百八十一节,jQuery-UI,知问前端--自动补全 UI--邮箱自动补全

    jQuery-UI,知问前端--自动补全 UI--邮箱自动补全 学习要点: 1.调用 autocomplete()方法 2.修改 autocomplete()样式 3.autocomplete()方法 ...

  2. 第一百七十七节,jQuery,知问前端--概述及 jQuery UI

    jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一.项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能 ...

  3. 知问前端——概述及jQuery UI

    知问系统,是一个问答系统.主要功能:即会员提出问题,会员回答问题.目前比较热门的此类网站有:知乎http://www.zhihu.com.百度知道http://zhidao.baidu.com等.这里 ...

  4. 知问前端——日历UI(三)

    datepicker日期选择选项 属性 默认值/类型 说明 minDate 无/对象.字符串或数值 日历中可以选择的最小日期 maxDate 无/对象.字符串或数值 日历中可以选择的最大日期 defa ...

  5. 知问前端——日历UI(二)

    datapicker外观选项 属性 默认值/类型 说明 disabled false/布尔值 禁用日历 numberOfMonths 1/数值 日历中同时显示的月份个数.默认为1,如果设置3就同时显示 ...

  6. 知问前端——日历UI(一)

    日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); ...

  7. 第一百八十二节,jQuery-UI,知问前端--日历 UI

    jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...

  8. 基于Jquery UI的autocompelet改写,自动补全控件,增加下拉选项,动态设置样式,点击显示所有选项,并兼容ie6+

    Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...

  9. 知问前端——对话框UI(一)

    对话框(dialog),是jQuery UI非常重要的一个功能.它彻底的代替了JavaScript的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 开启多个dialog 我们 ...

随机推荐

  1. 线程池ThreadPoolExecutor使用

    一.简介 线程池类为 java.util.concurrent.ThreadPoolExecutor,常用构造方法为: ThreadPoolExecutor(int corePoolSize, int ...

  2. Windows2008新建域时Administrator 帐户密码不符合要求

             Windows 2008 系统安装完毕后,(环境:在安装的时间,系统没有设置密码.做好系统后,进入制面板添加了密码或按ctrl + alt + del 设置密码后 在服务器管理-角色 ...

  3. jmeter3.0生成html格式的dashboard性能测试结果

    jmeter3.0以上支持生成dashboard的html报告,官网介绍:https://jmeter.apache.org/usermanual/generating-dashboard.html ...

  4. ProxySQL读写分离测试(续)

      Preface       I've implemented ProxySQL on PXC yesterday but got some errors when configured query ...

  5. 「暑期训练」「Brute Force」 Restoring Painting (CFR353D2B)

    题意 给定一定条件,问符合的矩阵有几种. 分析 见了鬼了,这破题谁加的brute force的标签,素质极差.因为范围是1e5,那你平方(枚举算法)的复杂度必然爆. 然后你就会思考其中奥妙无穷的数学规 ...

  6. 每天一个Linux命令(12):su命令

    su命令用于切换当前用户身份到其他用户身份,变更时须输入所要变更的用户帐号与密码. 语法: su(选项)(参数) 选项: -c<指令>或--command=<指令>:执行完指定 ...

  7. 【转】Linux学习(1)-常用快捷键、文件管理和查询

    原文链接:http://www.cnblogs.com/zhaopei/p/7397402.html 有话要说 为什么要用Linux?要用Linux的原因太多,想说说不完啊. 如果你说用Linux只是 ...

  8. Leetcode. 回文字符串的分割和最少分割数

    Q1: 回文字符串的分割 Given a string s, partition s such that every substring of the partition is a palindrom ...

  9. 论文翻译_Tracking The Untrackable_Learning To Track Multiple Cues with Long-Term Dependencies_IEEE2017

    Tracking The Untrackable: Learning to Track Multiple Cues with Long-Term Dependencies 跟踪不可跟踪:学习跟踪具有长 ...

  10. php+Mysql分页 类和引用详解

    一下内容为专用于分页的类以及具体的方法和解析.<?php class Page { private $total; //数据表中总记录数 private $listRows; //每页显示行数 ...