javascript 输入框输入时进行下拉提示

最新推荐文章于 2023-04-16 02:16:21 发布

wccmfc123

最新推荐文章于 2023-04-16 02:16:21 发布

阅读量1k

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/wccmfc123/article/details/8556123

版权

学习笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

InputPrompt.js

//输入时自动下拉提示
function InputPrompt(arg){
	this.items=arg.items||undefined;//下拉项目
	this.container=null;
	this.input=arg.input||undefined;
	this.text='';
	this.preLength=0;//文本上一次长度
	this.hideFlag=true;//输入宽失去光标，若鼠标在下拉项目区域时，下拉宽不隐藏，否则隐藏
	this.bgColor=arg.bgColor||"#DCDCDC",//下拉框背景色
	this.itemColor=arg.itemColor||"#FFA07A",//选中的颜色
	this.init();
}
//初始化
InputPrompt.prototype.init=function(){
	if(this.input==undefined||this.items==undefined){
		var str=this.input==undefined?'InputPrompt Object argment:input error':'InputPrompt Object argment:';
		str+=this.items==undefined?' items error':'';
		alert(str);
		return;
	}
	this.container=document.createElement("div");
	document.body.appendChild(this.container);
	var _this=this;//this解决this作用域问题
	this.on(_this.input,"keyup",function(e){
		_this.inputChange(e);//键盘输入改变
		});//注册监听
	this.on(_this.input,"blur",function(e){
		_this.mouseEvent(e);//输入框失去焦点
		});
}
/**
 * 设置监听
 * IE支持e.attachEvent("on"+type,fun)  火狐支持e.addEventListener(type,fun,false)
 * @param {Object} e
 * @param {Object} type
 * @param {Object} fun
 */
InputPrompt.prototype.on=function(e,type,fun){
	e.addEventListener?e.addEventListener(type,fun,false):e.attachEvent("on"+type,fun);
}
/**
 * 下拉提示构建
 * @param {Object} str输入框的文本
 */
InputPrompt.prototype.inputHelp=function(str){
        var pos=[0,0];//下拉的坐标
        pos[0]=this.input.offsetLeft;//输入框的相对位置
        pos[1]=this.input.offsetTop+22;
        var _this=this;
        if(str.length>0){
          this.container.innerHTML='';//清空容器
          for(i in this.items){//下拉项目构建
           var divChild=document.createElement("div");
           this.setElementAttribute(divChild,'id',i);
           divChild.innerHTML=str+"@"+this.items[i];
           this.on(divChild,"mouseover",function(e){
        	   _this.mouseEvent(e);
        	   });
           this.on(divChild,"mouseout",function(e){
        	   _this.mouseEvent(e);
        	   });
           this.on(divChild,"click",function(e){
        	   _this.mouseEvent(e);
        	   });
           this.container.appendChild(divChild);
         }
          this.container.style.cssText="overflow: hidden;width:150px;background-color: "+this.bgColor+";"+
               "position:absolute;display:block;left:"+pos[0]+"px;top:"+pos[1]+"px;";
          
        }else{
          this.container.style.display="none";
        }
}
/**
 * 输入框的响应
 * @memberOf {TypeName} 
 */
InputPrompt.prototype.inputChange=function (e){
	  this.text=this.input.value;
      var curLength=this.text.length;
	  if(e.keyCode==13){//enter
		   //TODO
	  }else if(e.keyCode==38){// 方向键上
		  if(curLength>0){
			  this.hideFlag=false;
		  }
		  //TODO
	  }
	  else if(e.keyCode==40){// 方向键下
		  if(curLength>0){
			  this.hideFlag=false;
		  }
		  //TODO
	  }else{
            var flag=this.text.lastIndexOf('@'); //检查是否包含@，若有则继续输入时不在提示
            if(curLength!=this.preLength&&flag==-1){
               this.inputHelp(this.text);
            }
            this.preLength=curLength;//记录当前字符长度
	  }
}
/**
 * 各类事件监听
 * @param {Object} e
 * @memberOf {TypeName} 
 */
InputPrompt.prototype.mouseEvent=function (e){
        var brow=e.srcElement||e.target;//IE支持e.srcElement.className  FireFox支持e.target
        if(e.type=='mouseover'){//鼠标进入下拉项目
           brow.style.cssText="background-color:"+this.itemColor+";";
           this.hideFlag=false;//输入框失去焦点且鼠标在下拉项目中
        }else if(e.type=='mouseout'){//鼠标移出下拉项目
           brow.style.cssText="";
           this.hideFlag=true;//输入框失去焦点且鼠标不在下拉项目中
        }else if(e.type=='click'){//鼠标点击下拉项目
           this.input.value=brow.innerHTML;
           this.container.style.display="none";
        }else if(e.type=='blur'){//输入框失去焦点
           if(this.hideFlag)
             this.container.style.display="none";
        }
}

InputPrompt.prototype.setElementAttribute=function(e,name,value){
	e.setAttribute(name,"item"+value);
}
InputPrompt.prototype.getEleById=function(i){
	return document.getElementById("item"+i);
}

test.html

<html>

new InputPrompt({
          input:document.getElementById("in"),
          items:['qq.com','163.com','126.com','sina.com','hotmail.com','gmail.com','yahoo.com','sohu.com','139.com','wo.com.cn','189.cn'],
          bgColor:'blue',
          itemColor:'red'
        });
        new InputPrompt({
          input:document.getElementById("in2"),
          items:['qq.com','163.com','126.com','sina.com']
        });

</script>