一直想找一个现成的 简单又好用 的 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" class="tbl_box">';
if (hasErr) {
s += '<tr bgColor=red><td>没有相关内容，请重新输入！</td></tr></table>';
return s;
}
for (var i = 0; i < page.data.length; i++) {
s += '<tr onmouseover="bgColor=' + "'#9EB8C3'" + ';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 class="friendTip">' + page.pageInfo() + '</span>';
s += '<iframe style="position:absolute; visibility:inherit; top:0px;left:0px;width:1px; height:100px; z-index:5;filter=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);"></iframe>';
div.innerHTML = s;
table = $("suggestTable" + 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";
}
分享到：
相关推荐
C#文本框输入提示功能。有完整的代码，可供参考，获得焦点后就会自动消失
文本框输入 @ 符号的输入提示的JS代码，类似搜索框的提示，输入指定的字符会弹出提示。和自动完成功能有些区别。
模仿百度的搜索框输入提示。
现有地址输入提示方法涉及标准地址和POI的研究较少，地址字符串的索引大多采用Trie（字典）树索引，但Trie树建立时内存消耗巨大，在面临海量数据时，问题更加突出。针对以上问题，提出一种基于key-value数据库的快速...
VC++ 自动完成输入提示功能的实现 VC++自动完成功能的实现，通俗来说其实就是输入提示功能，只要你在输入框输入任意字符，程序会查找出与此对应最有可能出现的词组并显示在输入框中，如果词库够丰富的话，那么程序会...
ajax实现输入提示（类似百度和Google的输入提示） 用法非常简单： 1、在jsp页面引入autosuggest.js文件 2、建一个text文本框 3、写js代码： <script> new actb("tb", loadAllMessage("suggest" , ""), null); 4、这...
UITextField 模仿百度，下拉框输入提示，选择正确的E—mail地址
JQuery实现智能输入提示（仿机票预订网站）
基于Hadoop云计算平台仿百度智能输入提示算法的研究与实现.pdf
JSON ajax jquery java 源代码 搜索提示功能 能提取后台数据定位到页面输入框，提示输入信息
基于HTML5的表单输入提示的实现，内核由jquery.label_better.js、jquery.label_better.min.js实现，当鼠标放在表单输入框上时，会浮动显示出文字提示，有动态效果，测试时最好在火狐台Chrome浏览器下。
Javascript实现的网页文本框输入提示 实现原理： 文本框输入内容后，搜索字符串数组，将匹配内容写入DIV以下拉列表形式展现，并支持方向键选择，效果类似搜索网站的输入提示。 友情提示： 较为粗糙的实现方法，...
java实现输入条件自动提示 模仿百度输入提示
Visual C++源代码 144 如何在DataGrid单元格设置输入提示Visual C++源代码 144 如何在DataGrid单元格设置输入提示Visual C++源代码 144 如何在DataGrid单元格设置输入提示Visual C++源代码 144 如何在DataGrid单元格...
一个简单的Ajax实现输入时自动提示的代码，可以连接数据库，大家可以下下来看看，不过网上也有，基本差不多。
基于jquery的搜索框输入提示 关键词匹配搜索 仿百度与google的搜索框输入提示，支持键盘上下选择与鼠标点击选择。只包含前面代码，后台返回数据为模拟的数据。
限制输入 提示输入剩余数字