<!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>Email Suggest 邮箱输入提示演示</title> </head> <body> <div id="title"> <h1>Email Suggest 邮箱输入提示演示</h1> </div> <div id="wrapper"> <div id="login_box"> <div class="clearfix"><label for="email">电子邮箱:</label><input type="text" id="email" autocomplete="off" /></div> <ul id="email_list"> <li class="first_li">请选择邮箱类型</li> <li></li> <li>@163.com</li> <li>@126.com</li> <li>@qq.com</li> <li>@yahoo.com.cn</li> <li>@gmail.com</li> <li>@sohu.com</li> <li>@hotmail.com</li> <li>@sina.com</li> <li>@sina.cn</li> <li>@139.com</li> </ul> </div> </div> </body> </html>
*{ margin:0; padding:0 } body{background:#f3f3f3;font-size:12px;font-family:arial;} #title{width:320px;margin:3% auto 0;} h1{font-size:18px;} h6{ font-size:12px; font-weight:normal; color:#333;margin-bottom:10px; } h6 a { color:#09c; } #wrapper{ width:320px; height:30px; margin:30px auto 0; background:#fff; border:1px solid #ccc; -moz-border-radius:4px; border-radius:4px; padding:20px; -moz-box-shadow:1px 1px 4px #d3d3d3; } #login_box{position:relative;} .clearfix label{font-size:14px;float:left;} .clearfix{height:30px;line-height:30px;} .clearfix:after{height:0;visibility:hidden;content:'.';overflow:hidden;display:block;} #email{ width:180px; height:18px; border:1px solid #74c9e6; padding:5px 6px; background:#fff; margin-left:10px; -moz-border-radius:2px; border-radius:2px; font-family:arial; float:left; } #email_list{ width:192px; list-style:none; border:1px solid #74c9e6; -moz-border-radius:0 0 2px 2px; border-radius:2px; position:absolute; top:29px; left:80px; background:#fff; display:none; } #email_list li{ width:100%; height:30px; line-height:30px; text-indent:10px; cursor:pointer; overflow:hidden; } #email_list li.first_li{cursor:default;} #email_list .current{background:#baeafb;}
(function() { /* 初始化 */ var emailInput = document.getElementById('email'), list = document.getElementById('email_list'), items = list.getElementsByTagName('li'), item1 = items[1], len = items.length, suffix = [], newSuffix, indexA, indexB, highlight = 'current', isIE = navigator.userAgent.toLowerCase().indexOf('msie') != -1, clearClassname = function() { for (var i = 1, el; i < len && (el = items[i]); i++) { el.className = ''; } }; /* 将邮箱后缀存放到一个新数组中 */ for (var j = 1, el; j < len && (el = items[j]); j++) { suffix[suffix.length++] = el.innerHTML; } /* 邮箱输入框绑定keyup事件 */ emailInput.onkeyup = suggest; /* suggest核心部分 */ function suggest(event) { var e = event || window.event, eCode = e.keyCode, val = this.value, index = val.indexOf('@'), isIndex = index !== -1; clearClassname(); //输入框不为空 if (val) { item1.className = highlight; list.style.display = 'block'; for (var i = 1, el; i < len && (el = items[i]); i++) { el.onmouseover = function() { clearClassname(); item1.className = ''; this.className = highlight; indexA = 1; indexB = 0; } el.onmouseout = function() { this.className = ''; item1.className = highlight; } el.onclick = function() { emailInput.value = this.innerHTML; } } } //输入框为空 else { item1.className = ''; for (var i = 1, el; i < len && (el = items[i]); i++) { el.onmouseout = el.onmouseover = el.onclick = null; } if (eCode === 38 || eCode === 40 || eCode === 13) return; } item1.innerHTML = val; newSuffix = []; //初始化空数组 for (var i = 1, el; i < len && (el = items[i]); i++) { /* 以邮箱后缀和输入框中@标志符后是否 有相同的字符串来显示或隐藏该元素 */ el.style.display = isIndex && el.innerHTML.indexOf(val.substring(index)) === -1 ? 'none': 'block'; if (i > 1) el.innerHTML = (isIndex ? val.substring(0, index) : val) + suffix[i - 1]; /* 出现@标志符时将新的元素的排列顺序 存放到空数组newSuffix中 */ if ((!isIE && window.getComputedStyle(el, null).display === 'block') || (isIE && el.currentStyle.display === 'block')) { newSuffix[newSuffix.length++] = i; } } /* 判断按键 */ switch (eCode) { case 38: //上方向键 keyMove( - 1); break; case 40: //下方向键 keyMove(1); break; case 13: //回车键 getVal(); break; default: indexA = 1; indexB = 0; return; } } /* 方向键控制元素的高亮效果 */ function keyMove(n) { var newLen = newSuffix.length; if (newLen > 0 && newLen < 8) { items[newSuffix[indexB]].className = item1.className = ''; indexB += n; if (indexB === newLen) indexB -= newLen; else if (indexB < 0) indexB += newLen; items[newSuffix[indexB]].className = highlight; } else { items[indexA].className = item1.className = ''; indexA += n; if (indexA === len) indexA -= len - 1; else if (indexA === 0) indexA += len - 1; items[indexA].className = highlight; } } /* 获取当前高亮元素的值 */ function getVal() { var newLen = newSuffix.length; emailInput.value = newLen > 0 && newLen < 8 ? items[newSuffix[indexB]].innerHTML: items[indexA].innerHTML; list.style.display = 'none'; } /* 关闭提示层 */ document.onclick = function(e) { var e = e || window.event, eNode = e.target ? e.target: e.srcElement; if (eNode !== emailInput && eNode !== items[0]) { list.style.display = 'none'; } } })();
相关推荐
google suggest 的实现,google suggest 的实现
赠送jar包:lucene-suggest-7.7.0.jar; 赠送原API文档:lucene-suggest-7.7.0-javadoc.jar; 赠送源代码:lucene-suggest-7.7.0-sources.jar; 赠送Maven依赖信息文件:lucene-suggest-7.7.0.pom; 包含翻译后的API...
implement search suggest function using ajax
赠送jar包:lucene-suggest-6.6.0.jar; 赠送原API文档:lucene-suggest-6.6.0-javadoc.jar; 赠送源代码:lucene-suggest-6.6.0-sources.jar; 赠送Maven依赖信息文件:lucene-suggest-6.6.0.pom; 包含翻译后的API...
仿google suggest仿google suggest仿google suggest仿google suggest仿google suggest
ajaxSuggest示例代码
asp.net & ajax 实现 google suggest
使用ajax技术实现的google suggest,功能和google一样。参照google制作。下载后解压文件,将SuggestServlet 放在src的com.huage.ajax.servlet包下,将suggest.jsp放在WebRoot的根目录下,运行suggest.jsp即可。本...
Google suggest, suggest,Google搜索引擎 MyEclipse 开发 tomcat发布
基于JQUERY的SUGGEST效果,自己写的
bootstrap 下拉搜索 suggest plugin
ajax仿google suggest 数据库版。。java
JavaScript Suggest自动补全的输入框下拉提示类
ajax自动提示功能,能快速提高用户输入的效率
前不久做淘宝首页的性能优化,淘宝原来用的是 YUI AutoComplete, 但因其庞大的体积(压缩后 30k, 还需依赖 30k 的 datasource 组件),同时对中文输入法的支持不好(这是英美人士永远难以发现的 bug),使得 YUI ...
采用ajax+access+asp.net一起开发的一个仿google suggest 功能的应用程序.供学习ajax技术的开发者学习参考!
jquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google ...仿真google suggest dd
前端开源库-react-tag-suggest反应标签建议,标签自动建议
利用Visual Studio 2010和SQLserver2008基于net framework 4开发的类似google suggest自动完成功能代码。 可以使用上下键进行选择回车键选定,也可以使用鼠标点击选定。 默认是查询的系统数据库的一张表,使用时请...
ik,suggest 已经配置好了,可以在Windows/linux直接启动