inputSuggest在文本框输入字符时提示，类似Windows的“自动完成”功能，当在文本框输入字符时，与此相关的内容会显示在文本框的下边，你可随时使用键盘或鼠标点选那些提示，你就不用输入了。像QQ邮箱提示、百度的搜索框提示、淘宝的商品搜索提示等，现在有不少的网站都有类似效果，以提升用户体验。
使用方法：
new InputSuggest({ input HTMLInputElement 必选 data Array ['','','',''] 必选 containerCls 容器className itemCls 容器子项className activeCls 高亮子项className width 宽度设置 此项将覆盖containerCls的width opacity 透明度设置 此项将覆盖containerCls的opacity……
例子：
function () {var regSuggest = new InputSuggest({input: document.getElementById('rEmail'),data: ['', '', '', '', '', '', '','', '', '', '', '', '']});var logSuggest = new InputSuggest({input: document.getElementById('lEmail'),data: ['', '', '', '', '', '', '','', '', '', '', '', '']});}window.onload =
<!DOCTYPE HTML><html><head><title>inputSuggest输入字符时提示</title><style type="text/css">body{margin:0;padding:0;}input{width:200px;}.suggest-container{border:1px solid #C1C1C1;visibility:hidden;}.suggest-item{padding:3px 2px;}.suggest-active {background:#33CCFF;color:white;padding:3px 2px;} </style><script type="text/javascript">function InputSuggest(opt){this.win = null;this.doc = null; this.container = null;this.items = null;this.input = opt.input || null;this.containerCls = opt.containerCls || 'suggest-container';this.itemCls = opt.itemCls || 'suggest-item';this.activeCls = opt.activeCls || 'suggest-active';this.width = opt.width;this.opacity = opt.opacity;this.data = opt.data || [];this.active = null;this.visible = false;this.init();}InputSuggest.prototype = {init: function(){this.win = window;this.doc = window.document;this.container = this.$C('div');this.attr(this.container, 'class', this.containerCls);this.doc.body.appendChild(this.container);this.setPos();var _this = this, input = this.input; this.on(input,'keyup',function(e){if(input.value==''){_this.hide();}else{_this.onKeyup(e);}});// blur会在click前发生，这里使用mousedownthis.on(input,'blur',function(e){_this.hide(); });this.onMouseover();this.onMousedown();},$C: function(tag){return this.doc.createElement(tag);},getPos: function (el){var pos=[0,0], a=el;if(el.getBoundingClientRect){var box = el.getBoundingClientRect();pos=[box.left,box.top];}else{while(a && a.offsetParent){pos[0] += a.offsetLeft;pos[1] += a.offsetTop;a = a.offsetParent} }return pos;}, setPos: function(){var input = this.input, pos = this.getPos(input), brow = this.brow, width = this.width,opacity = this.opacity,container = this.container;container.style.cssText ='position:absolute;overflow:hidden;left:' + pos[0] + 'px;top:'+ (pos[1]+input.offsetHeight) + 'px;width:'// IE6/7/8/9/Chrome/Safari input[type=text] border默认为2，Firefox为1，因此取offsetWidth-2保证与FF一致+ (brow.firefox ? input.clientWidth : input.offsetWidth-2) + 'px;';if(width){container.style.width = width + 'px';}if(opacity){if(this.brow.ie){container.style.filter = 'Alpha(Opacity=' + opacity * 100 + ');';}else{container.style.opacity = (opacity == 1 ? '' : '' + opacity);} }},show: function(){this.container.style.visibility = 'visible';this.visible = true;},hide: function(){this.container.style.visibility = 'hidden';this.visible = false; },attr: function(el, name, val){if(val === undefined){return el.getAttribute(name);}else{el.setAttribute(name,val);name=='class' && (el.className = val); }},on: function(el, type, fn){el.addEventListener ? el.addEventListener(type, fn, false) : el.attachEvent('on' + type, fn);},un: function(el, type, fn){el.removeEventListener ? el.removeEventListener(type, fn, false) : el.detachEvent('on' + type, fn);},brow: function(ua){return {ie: /msie/.test(ua) && !/opera/.test(ua),opera: /opera/.test(ua),firefox: /firefox/.test(ua)};}(navigator.userAgent.toLowerCase()),onKeyup: function(e){var container = this.container, input = this.input, iCls = this.itemCls, aCls = this.activeCls;if(this.visible){switch(e.keyCode){case 13: // Enterif(this.active){input.value = this.active.firstChild.data;this.hide();}return;case 38: // 方向键上if(this.active==null){this.active = container.lastChild;this.attr(this.active, 'class', aCls);input.value = this.active.firstChild.data;}else{if(this.active.previousSibling!=null){this.attr(this.active, 'class', iCls);this.active = this.active.previousSibling;this.attr(this.active, 'class', aCls);input.value = this.active.firstChild.data;}else{this.attr(this.active, 'class', iCls);this.active = null;input.focus();input.value = input.getAttribute("curr_val");}}return;case 40: // 方向键下if(this.active==null){this.active = container.firstChild;this.attr(this.active, 'class', aCls);input.value = this.active.firstChild.data;}else{ if(this.active.nextSibling!=null){this.attr(this.active, 'class', iCls);this.active = this.active.nextSibling;this.attr(this.active, 'class', aCls);input.value = this.active.firstChild.data;}else{this.attr(this.active, 'class', iCls);this.active = null;input.focus();input.value = input.getAttribute("curr_val");}}return;}} if(e.keyCode==27){ // ESC键this.hide();input.value = this.attr(input,'curr_val');return;} if(input.value.indexOf('@')!=-1){return;}this.items = [];if(this.attr(input,'curr_val')!=input.value){this.container.innerHTML = '';for(var i=0,len=this.data.length;i<len;i++){var item = this.$C('div');this.attr(item, 'class', this.itemCls);item.innerHTML = input.value + '@' + this.data[i];this.items[i] = item;this.container.appendChild(item);}this.attr(input,'curr_val',input.value); }this.show();},onMouseover: function(){var _this = this, icls = this.itemCls, acls = this.activeCls;this.on(this.container,'mouseover',function(e){var target = e.target || e.srcElement;if(target.className == icls){if(_this.active){_this.active.className = icls;}target.className = acls;_this.active = target;}});},onMousedown: function(){var _this = this; this.on(this.container,'mousedown',function(e){var target = e.target || e.srcElement;_this.input.value = target.innerHTML;_this.hide();});}} </script><script type="text/javascript">window.onload = function(){var sinaSuggest = new InputSuggest({input: document.getElementById('sina'),data: ['','','','','']});var sohuSuggest = new InputSuggest({width: 300,opacity: 0.3,input: document.getElementById('sohu'),data: ['','','','','','','']});}</script></head><body><div style="width:400px;margin:30px auto;text-align:center;"><label>新浪</label><input type="text" id="sina"/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><label>搜狐</label><input type="text" id="sohu"/> </div></body></html>
js代码：
View Code
/*** new InputSuggest({* input HTMLInputElement 必选* data Array ['','','',''] 必选* containerCls 容器className* itemCls 容器子项className* activeCls 高亮子项className* width 宽度设置 此项将覆盖containerCls的width* opacity 透明度设置 此项将覆盖containerCls的opacity* });*/function InputSuggest(opt){this.win = null;this.doc = null; this.container = null;this.items = null;this.input = opt.input || null;this.containerCls = opt.containerCls || 'suggest-container';this.itemCls = opt.itemCls || 'suggest-item';this.activeCls = opt.activeCls || 'suggest-active';this.width = opt.width;this.opacity = opt.opacity;this.data = opt.data || [];this.active = null;this.visible = false;this.init();}InputSuggest.prototype = {init: function(){this.win = window;this.doc = window.document;this.container = this.$C('div');this.attr(this.container, 'class', this.containerCls);this.doc.body.appendChild(this.container);this.setPos();var _this = this, input = this.input; this.on(input,'keyup',function(e){if(input.value==''){_this.hide();}else{_this.onKeyup(e);}});// blur会在click前发生，这里使用mousedownthis.on(input,'blur',function(e){_this.hide(); });this.onMouseover();this.onMousedown();},$C: function(tag){return this.doc.createElement(tag);},getPos: function (el){var pos=[0,0], a=el;if(el.getBoundingClientRect){var box = el.getBoundingClientRect();pos=[box.left,box.top];}else{while(a && a.offsetParent){pos[0] += a.offsetLeft;pos[1] += a.offsetTop;a = a.offsetParent} }return pos;}, setPos: function(){var input = this.input, pos = this.getPos(input), brow = this.brow, width = this.width,opacity = this.opacity,container = this.container;container.style.cssText ='position:absolute;overflow:hidden;left:' + pos[0] + 'px;top:'+ (pos[1]+input.offsetHeight) + 'px;width:'// IE6/7/8/9/Chrome/Safari input[type=text] border默认为2，Firefox为1，因此取offsetWidth-2保证与FF一致+ (brow.firefox ? input.clientWidth : input.offsetWidth-2) + 'px;';if(width){container.style.width = width + 'px';}if(opacity){if(this.brow.ie){container.style.filter = 'Alpha(Opacity=' + opacity * 100 + ');';}else{container.style.opacity = (opacity == 1 ? '' : '' + opacity);} }},show: function(){this.container.style.visibility = 'visible';this.visible = true;},hide: function(){this.container.style.visibility = 'hidden';this.visible = false; },attr: function(el, name, val){if(val === undefined){return el.getAttribute(name);}else{el.setAttribute(name,val);name=='class' && (el.className = val); }},on: function(el, type, fn){el.addEventListener ? el.addEventListener(type, fn, false) : el.attachEvent('on' + type, fn);},un: function(el, type, fn){el.removeEventListener ? el.removeEventListener(type, fn, false) : el.detachEvent('on' + type, fn);},brow: function(ua){return {ie: /msie/.test(ua) && !/opera/.test(ua),opera: /opera/.test(ua),firefox: /firefox/.test(ua)};}(navigator.userAgent.toLowerCase()),onKeyup: function(e){var container = this.container, input = this.input, iCls = this.itemCls, aCls = this.activeCls;if(this.visible){switch(e.keyCode){case 13: // Enterif(this.active){input.value = this.active.firstChild.data;this.hide();}return;case 38: // 方向键上if(this.active==null){this.active = container.lastChild;this.attr(this.active, 'class', aCls);input.value = this.active.firstChild.data;}else{if(this.active.previousSibling!=null){this.attr(this.active, 'class', iCls);this.active = this.active.previousSibling;this.attr(this.active, 'class', aCls);input.value = this.active.firstChild.data;}else{this.attr(this.active, 'class', iCls);this.active = null;input.focus();input.value = input.getAttribute("curr_val");}}return;case 40: // 方向键下if(this.active==null){this.active = container.firstChild;this.attr(this.active, 'class', aCls);input.value = this.active.firstChild.data;}else{ if(this.active.nextSibling!=null){this.attr(this.active, 'class', iCls);this.active = this.active.nextSibling;this.attr(this.active, 'class', aCls);input.value = this.active.firstChild.data;}else{this.attr(this.active, 'class', iCls);this.active = null;input.focus();input.value = input.getAttribute("curr_val");}}return;}} if(e.keyCode==27){ // ESC键this.hide();input.value = this.attr(input,'curr_val');return;} if(input.value.indexOf('@')!=-1){return;}this.items = [];if(this.attr(input,'curr_val')!=input.value){this.container.innerHTML = '';for(var i=0,len=this.data.length;i<len;i++){var item = this.$C('div');this.attr(item, 'class', this.itemCls);item.innerHTML = input.value + '@' + this.data[i];this.items[i] = item;this.container.appendChild(item);}this.attr(input,'curr_val',input.value); }this.show();},onMouseover: function(){var _this = this, icls = this.itemCls, acls = this.activeCls;this.on(this.container,'mouseover',function(e){var target = e.target || e.srcElement;if(target.className == icls){if(_this.active){_this.active.className = icls;}target.className = acls;_this.active = target;}});},onMousedown: function(){var _this = this; this.on(this.container,'mousedown',function(e){var target = e.target || e.srcElement;_this.input.value = target.innerHTML;_this.hide();});}}
