输入提示
一直想找一个现成的 简单又好用 的 js 做文本的输入提示，找来找去都不顺心，索性自己封装了一个简单的js,用的时侯构造一个json对象,然后new Suggest对象就可以了。
如：
var data= [{"text":"pek-北京","value":"北京"},{"text":"sha-上海","value":"上海"},{"text":"lon-伦敦","value":"伦敦"}];new Suggest("city",data,"北京")；/** * * @param {Object} objId 生成文本框(input) 的 id 和 name * @param {Object} data 原始数据，json 对象，两个属性 text 和 value,value是要放到输入框中的值，text是提示框中显示的值 * @param {Object} defaultValue 默认值 */function Suggest(objId, data, defaultValue){ //输入框 var obj; //提示框 var div; // div中的table(提示的内容都在此table中) var table; //eval成json对象 var orgData = eval(data); var page; /** * public 属性 */ this.hasErr = false; var rowIndex = -1; /** * 初始化 */ var init = function(){ document.write('<input width="85px" type="text" name="' + objId + '" id="' + objId + '" value="' + defaultValue + '" />'); obj = $(objId); document.write('<div id="suggest' + objId + '" name="suggest' + objId + '" align="left" style="position:absolute;width:190px;background-color:#fff;border:2px solid #9EB8C3;height:202px;overflow:auto;display:none;z-index: 9999;" onfocus="true"></div>'); div = $("suggest" + objId); // 重写输入框的 onkeyup事件 obj.onkeyup = function(evt){ evt = evt || window.event; var keyCode = window.event ? evt.keyCode : evt.which; switch (keyCode) { case 40: down(); break; case 38: up(); break; case 39: nextPage(); break; case 37: prePage(); break; default: suggest(); } }; // 重写提示框的 onblur div.onblur = function(){ if (document.activeElement.id != obj.id) { hide(); } }; // 重写输入框的 onblur obj.onblur = function(){ if (document.activeElement.id != div.id && document.activeElement.id.indexOf("suggest") != 0) { hide(); } }; } init(); /** * 构造提示信息 并显示 */ var suggest = function(){ buildData(); // 如果没有提示的数据 暂时认为用户输入有误 hasErr 置为 true if (!page.data || page.data.length == 0) { resetRowIndex(); this.hasErr = true; } else { this.hasErr = false; } position(obj, div); buildTable(); show(); }; /** * 在输入框中输入内容后，从orgData中选择合适的值显示在提示框中 */ var buildData = function(){ var input = obj.value.toUpperCase(); page = new Page(); if (input.trim() == "") {hide(); return ; } var temp = new Array(); var j = 0; for (var i = 0; i < orgData.length; i++) { if (orgData[i].text.indexOf(input) >= 0) { temp.push(orgData[i]); j++; } if (j == 10 || (temp.length > 0 && i == orgData.length - 1)) { page.push(temp); temp = new Array(); j = 0; } } }; /** * 构造提示框html */ var buildTable = function(){ var s = '<table id="suggestTable' + obj.id + '" width="100%" height="18" + ';this.style.cursor=' + "'hand'" + '" onmouseout="bgColor=' + "'#ffffff'" + '">'; s += '<td id="suggestTd' + i + '" onclick=\'javascript:choose("' + obj.id + '","' + div.id + '","' + page.data[i].value + '");\'>'; s += page.data[i].text; s += '</td></tr>'; } s += '</table>'; s += '<span + obj.id); }; /** * 提示框处于隐藏状态 ? true : false */ var alreadyHide = function(){ return div.style.display == "none"; }; /** * 显示提示框 */ var show = function(){ div.style.display = ""; }; /** * 把当前行设为初始值 -1 */ var resetRowIndex = function(){ rowIndex = -1; }; /** * 隐藏提示框 */ var hide = function(){ resetRowIndex(); div.style.display = "none"; }; /** * 下箭头 */ var down = function(){ if (alreadyHide()) { return suggest(); } var currentRow = table.rows[rowIndex]; var nextRow = table.rows[++rowIndex]; if (nextRow) { if (currentRow) { currentRow.style.background = ""; } nextRow.style.background = "#9EB8C3"; obj.value = page.data[rowIndex].value; } else if (page.hasNext()) { // 如果有下一页 nextPage(); } else if (currentRow) { firstPage(); } }; /** * 上箭头 */ var up = function(){ if (alreadyHide()) { return suggest(); } if (rowIndex == -1) { rowIndex = table.rows.length; } var currentRow = table.rows[rowIndex]; var nextRow = table.rows[--rowIndex]; if (nextRow) { if (currentRow) { currentRow.style.background = ""; } nextRow.style.background = "#9EB8C3"; obj.value = page.data[rowIndex].value; } else if (page.hasPre()) { // 如果有上一页 prePage(); } else if (currentRow) { lastPage(); } }; /** * 下一页 */ var nextPage = function(){ if (alreadyHide()) { return suggest(); } if (page.hasNext()) { page.next(); resetRowIndex(); buildTable(); } else { firstPage(); } };/** * 前一页 */ var prePage = function(){ if (alreadyHide()) { return suggest(); } if (page.hasPre()) { page.pre(); resetRowIndex(); buildTable(); } else { lastPage(); } };/** * 第一页 */ var firstPage = function(){ page.first(); resetRowIndex(); buildTable(); };/** * 最后页 */ var lastPage = function(){ page.last(); resetRowIndex(); buildTable(); }; /** * 分页类 */ function Page(){ // 所有页的数据 var list = new Array(); var c_index = 0; this.pageCount = 0; //当前页数据 this.data; this.push = function(onePage){ if (this.pageCount == 0) { this.data = onePage; } list.push(onePage); this.pageCount++; }; this.get = function(i){ return list[i]; }; this.pre = function(){ if (c_index > 0) { this.data = list[--c_index]; } }; this.next = function(){ if (c_index < list.length - 1) { this.data = list[++c_index]; } }; this.hasNext = function(){ return c_index < list.length - 1; }; this.hasPre = function(){ return c_index > 0; }; this.first = function(){ if (list.length > 0) { c_index = 0; this.data = list[c_index]; } }; this.last = function(){ if (list.length > 0) { c_index = list.length - 1; this.data = list[c_index]; } }; // 当前页数 从 1 开始 this.pageInfo = function(){ return c_index + 1 + "/" + this.pageCount; }; } /** * 定位提示框 * @param {Object} obj 输入框 * @param {Object} div 提示框 */ function position(obj, div){ var top = obj.offsetTop; var height = obj.clientHeight; var left = obj.offsetLeft; while (obj = obj.offsetParent) { top += obj.offsetTop; left += obj.offsetLeft; } div.style.top = (top + height + 6) + 'px'; div.style.left = left + 'px'; div.style.display = "block"; }}/** * 通过鼠标选择提示框中的内容 * @param {Object} objId * @param {Object} divId * @param {Object} value */function choose(objId, divId, value){ $(objId).value = value; $(divId).style.display = "none";} 1 楼 lseeo 2009-04-19 强！看不懂 2 楼 mazzystar 2009-05-19 lseeo 写道