一直想找一个现成的 简单又好用 的 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";
}
分享到：
相关推荐
在设计用户友好的界面时，我们有时需要为文本框提供输入提示，这通常被称为“水印”或“占位符”效果。当文本框为空时，会显示一条提示信息，一旦用户开始输入或文本框获得焦点，提示信息会自动消失。这种功能在许多...
在IT领域，搜索输入提示功能是一项常见的用户交互设计，它能极大地提高用户的使用体验，特别是在大数据量或复杂信息检索时。这个功能的核心是利用后台数据动态地为用户提供可能的搜索建议，帮助他们更快地找到目标...
在“Ajax实现输入提示”这个主题中，我们主要关注的是如何利用Ajax技术来构建一个动态的输入提示系统。这种系统通常用于搜索引擎、登录表单或任何需要根据用户输入提供实时建议的场景。以下是一些关于实现这一功能的...
VC++ 自动完成输入提示功能的实现 VC++自动完成功能的实现，通俗来说其实就是输入提示功能，只要你在输入框输入任意字符，程序会查找出与此对应最有可能出现的词组并显示在输入框中，如果词库够丰富的话，那么程序会...
本研究的重点是基于Hadoop云计算平台，实现一个类似于百度智能输入提示功能的算法，这项技术可以提高用户输入效率，减少输入错误，并且能够结合Hadoop的分布式特性来实现高性能的数据处理。 云计算技术可以分为广义...
【标题】：“百度地图输入提示接口完整demo” 在IT领域，地图API的使用越来越广泛，尤其是在开发具有定位、导航等功能的应用程序时。本资源提供的“百度地图输入提示接口完整demo”是一个实例，它展示了如何利用...
在这个项目中，“JQuery实现智能输入提示（仿机票预订网站）”是模拟机票预订网站中常见的功能——当用户在输入框中输入时，系统自动提供相关的城市或机场名称作为提示。这种功能大大提高了用户体验，减少了用户手动...
Javascript实现的网页文本框输入提示 实现原理： 文本框输入内容后，搜索字符串数组，将匹配内容写入DIV以下拉列表形式展现，并支持方向键选择，效果类似搜索网站的输入提示。 友情提示： 较为粗糙的实现方法，...
现有地址输入提示方法涉及标准地址和POI的研究较少，地址字符串的索引大多采用Trie（字典）树索引，但Trie树建立时内存消耗巨大，在面临海量数据时，问题更加突出。针对以上问题，提出一种基于key-value数据库的快速...
本资源主要介绍了使用Java实现输入条件自动提示的方法，旨在模仿百度输入提示。该资源包括准备工作、实例代码、逻辑处理类、SERVLET类、前台页面等部分，涵盖了输入条件自动提示的所有方面。 准备工作 在开始实现...
ajax实现输入提示（类似百度和Google的输入提示） 用法非常简单： 1、在jsp页面引入autosuggest.js文件 2、建一个text文本框 3、写js代码： <script> new actb("tb", loadAllMessage("suggest" , ""), null); 4、这...
本文将深入探讨如何使用Ajax实现输入提示功能，尤其关注支持中文的情况。 一、Ajax基础 Ajax的核心是JavaScript对象XMLHttpRequest，它允许在不刷新整个页面的情况下与服务器进行通信。通过创建XMLHttpRequest对象...
【标题】"仿google输入提示"是一个编程技术实践，它主要涉及到前端开发中的自动补全功能，这种功能在搜索引擎、表单输入等场景中广泛应用。Google的输入提示以其高效、精准和用户友好而著名，因此许多开发者试图在...
标题中的“非常实用的一个联想输入提示”指的是在输入过程中，系统能够自动根据用户输入的关键字，预测并显示可能的相关词汇或短语，帮助用户快速完成输入。这种功能常见于各种输入法、搜索框以及文本编辑器中，极大...
总结，实现Ajax文本框输入提示的关键在于：前端捕获用户输入、发送Ajax请求、处理服务器返回数据；后端接收请求、查询数据库并返回数据。这样的功能提升了用户体验，让用户在输入时就能快速获取相关信息，而无需等待...
"jquery的搜索框输入提示"是一个基于jQuery实现的功能，它旨在提高用户体验，特别是在用户进行搜索时提供实时的建议或匹配结果。这个功能通常用于搜索引擎或者网站的搜索框，如百度和谷歌，当用户输入关键词时，会...
标题和描述中提到的“提示输入剩余数字”是一个具体的限制输入的实现方式，它通常用于场景如密码强度验证、手机号码或身份证号码输入等，限制用户只能输入特定数量的数字。 以下是对这一知识点的详细说明： 1. **...