利用js实现输入框动态提示信息

http://blog.csdn.net/linzhiqiang0316/article/details/51969040

为了提高和用户的交互性，现在的输入框往往都采用输入信息自动提示的功能，类似于百度输入框中的提示功能。

设计思路是：在输入框input的组件下面放置一个div，这个div主要是为了提示信息的展示功能，类似于下拉框那种形式。

步骤一：在网页加载的时候会首先把输入框中要查询的信息全部加载出来，并且放置在一个全局变量中。

步骤二：当用户在输入框中输入信息的时候会触发响应函数，函数的主要功能是获取用户的输入值并继续监控用户后续的输入值，然后把输入值进行处理，于缓存中的全局变量进行对比操作，把缓存中相同的部分返回给上面提到过的div，div中就显示了和用户输入条件相类似的信息，提供用户选择。

步骤三：用户在菜单中选择自己想要的信息，通过js代码实现将选择的信息返回到输入框中去。

大体的设计思路就是这样，现在看看具体的例子：

1.菜单显示的样式信息：

[html] view plain copy

.auto_hidden {

width:204px;

border-top: 1px solid #333;

border-bottom: 1px solid #333;

border-left: 1px solid #333;

border-right: 1px solid #333;

position:absolute;

display:none;

}

.auto_show {

width:204px;

border-top: 1px solid #333;

border-bottom: 1px solid #333;

border-left: 1px solid #333;

border-right: 1px solid #333;

position:absolute;

z-index:9999; /* 保证页面在最前端*/

display:block;

height:100px;

overflow:auto

}

.auto_onmouseover{

color:#ffffff;

background-color:highlight;

width:100%;

}

.auto_onmouseout{

color:#000000;

width:100%;

background-color:#ffffff;

}

2.js部分的处理代码：

[html] view plain copy

var Bind = function(object, fun) {

return function() {

return fun.apply(object, arguments);

}

}

function AutoComplete(obj,autoObj,arr){

this.obj=document.getElementById(obj); //输入框

this.autoObj=document.getElementById(autoObj);//DIV的根节点

this.value_arr=arr; //不要包含重复值

this.index=-1; //当前选中的DIV的索引

this.search_value=”“; //保存当前搜索的字符

}

AutoComplete.prototype={

//初始化DIV的位置

init: function(){

this.autoObj.style.left = this.obj.offsetLeft + “px”;

this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + “px”;

this.autoObj.style.width= this.obj.offsetWidth - 2 + “px”;//减去边框的长度2px

},

//删除自动完成需要的所有DIV

deleteDIV: function(){

while(this.autoObj.hasChildNodes()){

this.autoObj.removeChild(this.autoObj.firstChild);

}

this.autoObj.className=”auto_hidden”;

},

//设置值

setValue: function(_this){

return function(){

_this.obj.value=this.seq;

_this.autoObj.className=”auto_hidden”;

}

},

//模拟鼠标移动至DIV时，DIV高亮

autoOnmouseover: function(_this,_div_index){

return function(){

_this.index=_div_index;

var length = _this.autoObj.children.length;

for(var j=0;j