36-自动补全、邮箱自动补全

最新推荐文章于 2022-05-06 11:26:43 发布

会编程的阿强

最新推荐文章于 2022-05-06 11:26:43 发布

阅读量833

点赞数

分类专栏： JQuery和Ajax

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/53196031

版权

JQuery和Ajax 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

index.js

$(function () {
	$('#reg').dialog({
		autoOpen:true,
		modal:true,
		width:320,
		height:340,
		resizable:false,
		title:'会员注册',
		buttons:{
			'提交':function(){
				
			}
		}
	});
      $('#date').datepicker();
	  //$('#reg input[title]').tooltip();
	  $('[title]').tooltip({
		  //disabled:true,
		  enabled:true,
		  //content:'改变title文本',
		  items:'input', //过滤用到的要显示的
		 // tooltipClass:'a',//设置样式类
		 position:{
			 my:'left center',
			 at:'right+5 center'//at是相对于my的
		 },
		 show:false,
		 hide:false,
		 open:function(e,ui){
			 //alert('打开的时候触发！'+ui.tooltip);
		 },
		 close:function(){
			 
		 },
		 create:function(){
			 
		 }
	  });
	  $("#pass").tooltip('open');
	  //自动补全
	 /* var host=['@qq.com','aaaa','aaaaaa','bb'];
	  $('#email').autocomplete({
		  source:host,
		  minLength:0,//显示数量
		  //disabled:true,
		  delay:0,//不需要延迟
		  autoFocus:true,//自动选择第一个
		  position:{
			  my:
			  at:
		  }
		  focus:function(e,ui){
			  alert('补全菜单获取焦点');
			  alert(ui.item.label);
		  },
		  select:function(){
			  alert('选定一个项目的时候触发！');
		  },
		  change:function(){
			  alert('在邮箱输入的文本改变的时候，焦点离开触发');
		  },
		  search:function(){
			  alert('搜索完毕触发！');
		  }
		  response:function(e,ui){
			  alert('搜索完毕触发！');
			  alert(ui.content[0].label);
		  }
	  });*/
	  //$('#email').autocomplete('search','a');//代替手工输入，自动搜索
	 /* $('#email').on('autocompleteopen',function(){
		  alert('自动补全打开！');
	  })*/
	  $('#email').autocomplete({
		  delay:0,
		  autoFocus:true,
		  source:function(request,response){
			  //获取用户输入的内容
			  //alert(request.term);
			  //response(['aa','aaaaa','aaaaa','bbbb']);
			  var hosts=['qq.com','163.com','263.com','sina.com','hotmail.com'],
			  term=request.term,//获取用户输入的内容
			 // response(hosts);
			  name=term,
			  host='',//邮箱的域名163.com
			  ix=term.indexOf('@'),//@的位置
			  result=[];  //最终呈现的邮箱列表
			  
			  result.push(term);
			  //如果有@符号,重新分配用户名和域名
			  if(ix>-1){
				  name=term.slice(0,ix);
				  host=term.slice(ix+1);
			  }
			  if(name){
				  //如果用户已经输入@和后面的域名
				  //那么就找到相关的域名提示，比如：aaa@1　提示aa@163.com
				  //如果用户还没有输入@或后面的域名
				  //那么就把所有的域名都提示出来
				  var findedHosts=(host?$.grep(hosts,function(value,index){
						  return value.indexOf(host)>-1
					  }):hosts),
					  findedResult=$.map(findedHosts,function(value,index){
							return name+'@'+value;
					 });
			  result=result.concat(findedResult);
			  }
			  response(result);
		  }
	  });
	});

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>知问</title>
	<!--jquery核心包-->
	<script type="text/javascript" src="js/jquery.js"></script>
	<!--jquery UI核心包-->
	<script type="text/javascript" src="js/jquery.ui.js"></script>
	<!--内部js-->b|
	<script type="text/javascript" src="js/index.js"></script>
	<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
	<!--jquery UI样式-->
	<link rel="stylesheet" href="css/smoothness/jquery.ui.css" type="text/css" />
	<!--内部样式-->
	<link rel="stylesheet" href="css/style.css" type="text/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">
					<input type="submit"  id="search_button"/>
			   </div>
			   <div class="header_member">
			      <a href="##" class="login">登录</a>|<a href="#">注册</a>
			   </div>
			</div>
	 </div>
	 
	 <div id="reg">
		<p>
	     <label for="user" >账号：</label>
	     <input type="text" name="user" id="user" class="text" title="请输入账号，不少于2位"/>
		 <span class="star">*</span>
		 </p>
		 	<p>
	     <label for="pass" >密码：</label>
	     <input type="password" name="pass" id="pass" class="text" title="请输入密码，不少于6位"/>
		 <span class="star">*</span>
		 </p>
		 <p>
	     <label for="email" >邮箱：</label>
	     <input type="text" name="email" id="email" class="text" title="请输入正确的邮箱"/>
		 <span class="star">*</span>
		 </p>
		  <p>
	     <label >性别：</label>
	     <input type="radio" checked name="sex" value="male" id="male"/><label for="male">男</label>
		  <input type="radio" name="sex" value="female" id="female"/><label for="female">女</label>
		 </p>
		  <p>
	     <label for="date" >生日：</label>
	     <input type="text" checked name="day" readonly class="text" id="date"/>
		
		 </p>
	 </div>

</body>

</html>

style.css

body{
	margin:0;
	padding:0;
	font-size:12px;
	font-family:宋体;
	background:#fff;
}
/*更改jQuery UI主题的对话框header的背景*/
.ui-widget-header {
	background:url(../img/ui_header_bg.png);
}
#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;
	height:40px;
	line-height:40px;
	padding:0 10px;
	float:left;
}

#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:6px;
	float:left;
}

#header .header_member {
	float:right;
	line-height:40px;
	height:40px;
	font-size:14px;
}


#header .header_member a{
	text-decoration:none;
	color:#555;
	font-size:14px;
}
.ui-tooltip{
	color:#666;
}
#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;
	
}

会编程的阿强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
36-自动补全、邮箱自动补全

index.js$(function () { $('#reg').dialog({ autoOpen:true, modal:true, width:320, height:340, resizable:false, title:'会员注册', buttons:{ '提交':function(){ } } }); $(
复制链接

扫一扫