jquery UI学习笔记-知问前段之邮箱自动补全

来源：互联网发布：淘宝宝贝描述图片制作编辑：程序博客网时间：2024/06/09 04:57

首先贴出效果图：

学习要点：

1.数据源 function

2.邮箱自动补全

本节课，我们通过自动补全 source 属性的 function 回调函数，来动态的设置我们的数据源，以达到可以实现邮箱补全功能。
一．数据源 function
自动补全 UI 的 source 不但可以是数组，也可以是 function 回调函数。提供了自带的两个参数设置动态的数据源。

$('#email').autocomplete({source : function (request, response) {alert(request.term); //可以获取你输入的值response(['aa', 'aaaa', 'aaaaaa', 'bb']); //展示补全结果},});

注意：这里的 response 不会根据你搜索关键字而过滤无关结果，而是把整个结果全部呈现出来。因为 source 数据源，本身就是给你动态改变的，就由你自定义，从而放弃系统内置的搜索能力。

二．邮箱自动补全

$('#email').autocomplete({autoFocus : true,delay : 0,source : function (request, response) {var hosts = ['qq.com','163.com', '263.com', 'gmail.com', 'hotmail.com'], //起始term = request.term, //获取输入值ix = term.indexOf('@'), //@name = term, //用户名host = '', //域名result = []; //结果//结果第一条是自己输入result.push(term);if (ix > -1) { //如果有@的时候name = term.slice(0, ix); //得到用户名host = term.slice(ix + 1); //得到域名}if (name) {//得到找到的域名var findedHosts = (host ? $.grep(hosts, function (value, index) {return value.indexOf(host) > -1;}) : hosts),//最终列表的邮箱findedResults = $.map(findedHosts, function (value, index) {return name + '@' + value;});//增加一个自我输入result = result.concat(findedResults);}response(result);},});

下面是源代码，延续上一篇的实例。

index.html代码和style.css还是和上一篇的一样：jquery UI学习笔记-知问前端之自动补全工具UI，jquery UI学习笔记-知问前端之自动补全工具UI的tooltip

下面主要是index.js的代码发生了改变：

$(function(){$('#search_button').button();$('#reg').dialog({autoOpen:true,modal:true,resizable:false,width:320,height:340,buttons:{'提交':function(){}}});$('#reg').buttonset();$('#reg input[title]').tooltip({position : {my : 'left center',at : 'right+5 center'/*right加上5个像素*/},});$('#date').datepicker();var srcArray=['aaa@163.com', 'bbb@163.com', 'ccc@163.com'];$('#email').autocomplete({delay:0,autoFocus : true,source:function(request,response){ var hosts=['qq.com','163.com','126.com','gmail.com','hostmail.com'], term=request.term,//获取输入的内容 name=term, host='',//域名 ix=name.indexOf('@'),//获取@的位置 result=[];//结果 //结果第一条是自己输入result.push(term); if(ix>-1){name=term.slice(0,ix);host=term.slice(ix+1); } if(name){//得到找到的域名var findedHosts=(host ? $.grep(hosts,function(value,index){return value.indexOf(host) > -1}):hosts),findedResults=$.map(findedHosts,function(value,index){return name+"@"+value;});result=result.concat(findedResults); } response(result);},});});

0 0