Skip to content

Instantly share code, notes, and snippets.

@jhjguxin

jhjguxin/demo.html

Created August 23, 2012 14:21
Show Gist options
  • Save jhjguxin/3437098 to your computer and use it in GitHub Desktop.
Save jhjguxin/3437098 to your computer and use it in GitHub Desktop.
Download ZIP
jquery autocomplete email input基于jQuery的input输入框下拉提示层，方便用户输入邮箱时的提示信息，需要的朋友可以参考下
Raw
demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://demo.jb51.net/js/2012/myinputMail/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="inputmail.js"></script>
<script type="text/javascript">
$(function(){
$("#loginName").changeTips({
divTip:".on_changes"
});
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
.login{width:400px; margin:0 auto; background:#EBEBEB; position:relative;}
input{ width:230px; height:28px; margin:10px 0; line-height:28px;}
.login .on_changes{width:232px; position:absolute; top:40px; list-style:none; background:#FFF; border:1px solid #000; display:none; padding:10px;}
.login .on_changes li{margin:8px;padding:4px;}
.login .on_changes li.active{ background:#CEE7FF;}
</style>
</head>
<body>
<div class="login">
<div class="ln"><input type="text" maxlength="128" name="loginName" id="loginName" placeholder="邮箱/会员帐号/手机号" /></div>
<ul class="on_changes">
<li email="">请选择邮箱类型</li>
<li email=""></li>
<li email="@sina.com"></li>
<li email="@163.com"></li>
<li email="@qq.com"></li>
<li email="@hotmail.com"></li>
<li email="@126.com"></li>
<li email="@gmail.com"></li>
<li email="@yahoo.com"></li>
</ul>
</div>
http://xiazai.jb51.net/201202/yuanma/lwme-jqueryui-demo.rar
http://xiazai.jb51.net/201206/yuanma/myinputMail_jb51.rar
</body>
</html>
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Fancy Validate - jQuery UI Autocomplete</title>
<link href="jquery-ui/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery-ui/js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="jquery-ui/js/jquery-ui-widget-combobox.js"></script>
<style>
body {
font-size: 14px;
}
fieldset {
width: 388px;
margin: 0 auto;
text-align: right;
}
fieldset div {
margin: 15px auto;
}
.cbo .ui-button-text {
line-height: 1.3;
padding-top: 0;
padding-bottom: 0;
}
.cbo .ui-autocomplete-input {
width: 7.2em;
}
</style>
<script>
$(function() {
/* custom source autocomplete */
// 自定义source函数
var hosts = ["gmail.com", "live.com", "hotmail.com", "yahoo.com", "cnblogs.com", "火星.com", "囧月.com"];
$("#email1").autocomplete({
autoFocus: true,
source: function(request, response) {
var term = request.term, //request.term为输入的字符串
ix = term.indexOf("@"),
name = term, // 用户名
host = "", // 域名
result = []; // 结果
result.push(term);
// result.push({ label: term, value: term }); // json格式
if (ix > -1) {
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if (name) {
var findedHosts = (host ? $.grep(hosts, function(value) {
return value.indexOf(host) > -1;
}) : hosts),
findedResults = $.map(findedHosts, function(value) {
return name + "@" + value; //返回字符串格式
// return { label: name + " @ " + value, value: name + "@" + value }; // json格式
});
result = result.concat($.makeArray(findedResults));
}
response(result); //呈现结果
}
});
});
</script>
</head>
<body>
<form action="?" id="fancyform">
<fieldset>
http://xiazai.jb51.net/201202/yuanma/lwme-jqueryui-demo.rar
<div>
Email(随便输)：<input id="email1" type="text" />
</div>
</fieldset>
</form>
</body>
</html>
Raw
inputmail.js
// JavaScript Document
(function($){
$.fn.extend({
"changeTips":function(value){
value = $.extend({
divTip:""
},value)
var $this = $(this);
var indexLi = 0;
//点击document隐藏下拉层
$(document).click(function(event){
if($(event.target).attr("class") == value.divTip || $(event.target).is("li")){
var liVal = $(event.target).text();
$this.val(liVal);
blus();
}else{
blus();
}
})
//隐藏下拉层
function blus(){
$(value.divTip).hide();
}
//键盘上下执行的函数
function keychang(up){
if(up == "up"){
if(indexLi == 1){
indexLi = $(value.divTip).children().length-1;
}else{
indexLi--;
}
}else{
if(indexLi == $(value.divTip).children().length-1){
indexLi = 1;
}else{
indexLi++;
}
}
$(value.divTip).children().eq(indexLi).addClass("active").siblings().removeClass();
}
//值发生改变时
function valChange(){
var tex = $this.val();//输入框的值
var fronts = "";//存放含有“@”之前的字符串
var af = /@/;
var regMail = new RegExp(tex.substring(tex.indexOf("@")));//有“@”之后的字符串,注意正则字面量方法，是不能用变量的。所以这里用的是new方式。
//让提示层显示，并对里面的LI遍历
if($this.val()==""){
blus();
}else{
$(value.divTip).
show().
children().
each(function(index) {
var valAttr = $(this).attr("email");
if(index==1){$(this).text(tex).addClass("active").siblings().removeClass();}
//索引值大于1的LI元素进处处理
if(index>1){
//当输入的值有“@”的时候
if(af.test(tex)){
//如果含有“@”就截取输入框这个符号之前的字符串
fronts = tex.substring(tex.indexOf("@"),0);
$(this).text(fronts+valAttr);
//判断输入的值“@”之后的值，是否含有和LI的email属性
if(regMail.test($(this).attr("email"))){
$(this).show();
}else{
if(index>1){
$(this).hide();
}
}
}
//当输入的值没有“@”的时候
else{
$(this).text(tex+valAttr);
}
}
})
}
}
//输入框值发生改变的时候执行函数，这里的事件用判断处理浏览器兼容性;
if($.browser.msie){
$(this).bind("propertychange",function(){
valChange();
})
}else{
$(this).bind("input",function(){
valChange();
})
}
//鼠标点击和悬停LI
$(value.divTip).children().
hover(function(){
indexLi = $(this).index();//获取当前鼠标悬停时的LI索引值;
if($(this).index()!=0){
$(this).addClass("active").siblings().removeClass();
}
})
//按键盘的上下移动LI的背景色
$this.keydown(function(event){
if(event.which == 38){//向上
keychang("up")
}else if(event.which == 40){//向下
keychang()
}else if(event.which == 13){ //回车
var liVal = $(value.divTip).children().eq(indexLi).text();
$this.val(liVal);
blus();
}
})
}
})
})(jQuery)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment