【web前端攻城狮】邮箱自动补全autocomplete

<pre name="code" class="html"><html>
	<head>
		<title></title>
		<meta charset="UTF-8"/>
		<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/>
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>	
		<script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
	
	</head>
	<body>
		<input id="tags" type="text" />
	</body>
	
	<script type="text/javascript">
		$(function(){
			$("#tags").keyup(function(){
				var availableTags = ["@qq.com","@sina.com","@gmail.com"];
				var _this=$(this).val();
				if(_this.indexOf('@')<0){
					for(var i=0;i<availableTags.length;i++){
						availableTags[i]=_this+availableTags[i];
					}
					$("#tags").autocomplete({
						source:availableTags
					});
				}
			})
		});
	</script>
</html>
<!--注意了,为了方便操作,在这里把资源放在百度网盘供初学者使用
jquery ui 1.11.4 http://pan.baidu.com/s/1dEnbC3J
jquery http://pan.baidu.com/s/1i4vaYqh
注意 jquery要在jqueryUI之前写-->
下面是效果图
 
 
<img src="http://img.blog.csdn.net/20160112105346765" alt="" />

你可能感兴趣的:(web前端,自动补全,JqueryUI,邮箱,autocomleter)