Tip: you can modify some code before running
Input prompt using js (automatic completion)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ptml xmlns="http://www.w3.org/1999/xhtml"><pead><title>AutoComplete</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">. AutoComplete {margin: 8px; position: relative; float: left ;}. autoComplete input {width: 200px; height: 25px; margin: 0; padding: 0; line-height: 25px ;}. autoComplete ul {z-index:-12; padding: 0px; margin: 0px; border: 1px #333 solid; width: 200px; background: white; display: none; position: absolute; left: 0; top: 28px; * margin-left: 9px; * margin-top: 2px; margin-top: 1px ;}. autoComplete li {list-style: none ;}. autoComplete li a {display: block; color: #000; text-decoration: none; padding: 1px 0 1px 5px; _ width: 97% ;}. autoComplete li a: hover {color: #000; background: # ccc; border: none ;}</style><script type="text/javascript">//<![CDATA[var getElementsByClassName = function (searchClass, node, tag) {/* 兼容各浏览器的选择class的方法；(：http://www.111cn.net，想了解更多请看这个地址) */ node = node || document, tag = tag ? tag.toUpperCase() : "*"; if(document.getElementsByClassName){/* 支持getElementsByClassName的浏览器 */ var temp = node.getElementsByClassName(searchClass); if(tag=="*"){ return temp; } else { var ret = new Array(); for(var i=0; i<temp.length; i++) if(temp[i].nodeName==tag) ret.push(temp[i]); return ret; } }else{/* 不支持getElementsByClassName的浏览器 */ var classes = searchClass.split(" "), elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), patterns = [], returnElements = [], current, match; var i = classes.length; while(--i >= 0) patterns. push (new RegExp ("(^ | s)" + classes [I] + "(s | $)"); var j = elements. length; while (-- j> = 0) {current = elements [j], match = false; for (var k = 0, kl = patterns. length; k<kl; k++){ match = patterns[k].test(current.className); if(!match) break; } if(match) returnElements.push(current); } return returnElements; }};var addEvent=(function(){/* 用此函数添加事件防止事件覆盖 */ if(document.addEventListener){ return function(type, fn){ this.addEventListener(type, fn, false); }; }else if(document.attachEvent){ return function(type,fn){ this.attachEvent('on'+type, function () { return fn.call(this, window.event);/* 兼容IE */ }); }; }})();;(function(window){/* 插件开始 */var autoComplete=function(o){ var handler=(function(){ var handler=function(e,o){ return new handler.prototype.init(e,o); };/* 为每个选择的dom都创建一个相对应的对象，这样选择多个dom时可以很方便地使用 */ handler.prototype={ e:null, o:null, timer:null, show:0, input:null, popup:null, init:function(e,o){/* 设置初始对象 */ this.e=e, this.o=o, this.input=this.e.getElementsByTagName(this.o.input)[0], this.popup=this.e.getElementsByTagName(this.o.popup)[0], this.initEvent();/* 初始化各种事件 */ }, match:function(quickExpr,value,source){/* 生成提示 */ var li = null; for(var i in source){ if( value.length>0 & quickExpr.exe c (source [I])! = Null) {li = document. createElement ('Lil'); li. innerHTML = ''+ source [I] +''; this. popup. appendChild (li) ;}} if (this. popup. getElementsByTagName ('A '). length) this. popup. style. display = 'block'; else this. popup. style. display = 'none';}, ajax: function (type, url, quickExpr, search) {/* ajax request remote data */var xhr = window. activeXObject? New ActiveXObject ("Microsoft. XMLHTTP "): new XMLHttpRequest (); xhr. open (type, url, true);/* Same as asynchronous modification here */xhr. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); var that = this; xhr. onreadystatechange = function () {if (xhr. readyState = 4) {if (xhr. status = 200) {var data = eval (xhr. responseText); that. match (quickExpr, search, data);/* Same as the success callback function */} else {alert ("request page exception! ");/* Request failed */}; xhr. send (null) ;}, fetch: function (ajax, search, quickExpr) {var that = this; this. ajax (ajax. type, ajax. url + search, quickExpr, search) ;}, initEvent: function () {/* collection of events */var that = this; this. input. onfocus = function () {if (this. inputValue) this. value = this. inputValue; var value = this. value, quickExpr = RegExp ('^' + value, 'I'), self = this; var els = that. popup. getElementsByTagName ('A'); if ( Els. length> 0) that. popup. style. display = 'block'; that. timer = setInterval (function () {if (value! = Self. value) {/* determines whether the input content has changed. Compatible with Chinese characters */value = self. value; that. popup. innerHTML = ''; if (value! = '') {QuickExpr = RegExp ('^' + value); if (that. o. source) that. match (quickExpr, value, that. o. source); else if (that. o. ajax) that. fetch (that. o. ajax, value, quickExpr); }}, 200) ;}; this. input. onblur = function () {/* input box Add Event */if (this. value! = This. defaultValue) this. inputValue = this. value; clearInterval (that. timer); var current =-1;/* remember the current option with focus */var els = that. popup. getElementsByTagName ('A'); var len = els. length-1; var aClick = function () {that. input. inputValue = this. firstChild. nodeValue; that. popup. innerHTML = ''; that. popup. style. display = 'none'; that. input. focus () ;}; var aFocus = function () {for (var I = len; I >=0; I --) {if (this. parentNode = that. popup. children [I]) {current = I; break;} // that. input. value = this. firstChild. nodeValue; for (var k in that. o. elemCSS. focus) {this. style [k] = that. o. elemCSS. focus [k] ;}}; var aBlur = function () {for (var k in that. o. elemCSS. blur) this. style [k] = that. o. elemCSS. blur [k] ;}; var aKeydown = function (event) {event = event | window. event;/* compatible with IE */if (current === len & event. keyCode = 9) {/* Hide popup when tab key */that. popup. style. display = 'none';} else if (event. keyCode = 40) {/* easily select the prompt option for handling the up and down arrow key events */current ++; if (current <-1) current = len; if (current> len) {current =-1; that. input. focus ();} else {that. popup. getElementsByTagName ('A') [current]. focus () ;}} else if (event. keyCode = 38) {current --; if (current =-1) {that. input. focus ();} else if (current <-1) {current = len; that. popup. getElementsByTagName ('A') [current]. focus ();} else {that. popup. getElementsByTagName ('A') [current]. focus () ;}}; for (var I = 0; I<els.length; i++){/* 为每个选项添加事件 */ els[i].onclick = aClick; els[i].onfocus = aFocus; els[i].onblur = aBlur; els[i].onkeydown = aKeydown; } }; this.input.onkeydown = function(event){ event = event || window.event;/* 兼容IE */ var els = that.popup.getElementsByTagName('a'); if(event.keyCode==40){ if(els[0]) els[0].focus(); }else if(event.keyCode==38){ if(els[els.length-1]) els[els.length-1].focus(); }else if(event.keyCode==9){ if(event.shiftKey==true) that.popup.style.display = 'none'; } }; this.e.onmouseover = function(){ that.show=1; }; this.e.onmouseout = function(){ that.show=0; }; addEvent.call(document,'click',function(){ if(that.show==0){ that.popup.style.display='none'; } });/* 处理提示框dom元素不支持onblur的情况 */ } }; handler.prototype.init.prototype=handler.prototype;/* JQuery style，这样我们在处的时候就不用每个dom元素都用new来创建对象了 */ return handler;/* 把内部的处理函数传到外部 */ })(); if(this.length){/* 处理选择多个dom元素 */ for(var a=this.length-1; a>= 0; a --) {/* call method to generate a processing object for each selected dom so that they do not affect each other */handler (this [a], o );}} else {/* processing selects a dom element */handler (this, o) ;}return this ;}; return window. autoComplete = autoComplete;/* expose method to global object * // * plug-in end */}) (window);/* call */addEvent. call (null, 'load', function () {autoComplete. call (getElementsByClassName ('autocomplete'), {/* use call or apply to call this method */source: ['123', '023', 0123, 212,214, '1234 ', '123', 1987,17563, 20932],/* search in this array when prompted * // ajax: {type: 'post', url: './php/fetch. php? Search = '},/* if ajax is used, the data format returned remotely must be the same as that returned by source */elemCSS: {focus: {'color': 'black', 'background ': '# ccc'}, blur: {'color': 'black', 'background': 'Transparent '}}, /* keys in some objects must support the style attribute in js objects */input: 'input',/* use the input element in the input box */popup: 'Ul '/* use ul element in the prompt box */}); //]></script></pead> <body><!-- 这所以使用这么多的z-index是因为ie6和ie7的问题 --> <div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div class="autoComplete" > <input value="input" /> <ul><li></li></ul> </div> <div ></div> </div> <div > <p >Tip:</p> <ul> <li>Enter 0, 1, and 2 to receive a prompt.</li> <li>You can select a prompt with the mouse or up or down key.</li> <li>Click the mouse or press enter to select an option.</li> <li>You can modify the call location so that different content is displayed in each input box.</li> </ul> </div></body></ptml>
Tip: you can modify some code before running
