js自动补全

最新推荐文章于 2023-10-11 15:15:48 发布

周梦顺

最新推荐文章于 2023-10-11 15:15:48 发布

阅读量1.3k

点赞数 2

分类专栏：自动补全文章标签：自动补全 js js自动补全

本文链接：https://blog.csdn.net/zhoumengshun/article/details/70156574

版权

自动补全专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原生js的自动补全，不依赖jquery,样式大家可以自己根据自己的需要修改，以下供大家参考
点击下载案例代码

<!doctype html>
<html>
<meta charset="utf-8">

<!--=================== 封装开始 ======================-->
<!--样式-->
<style>
    .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;
    }
    .auto_onmouseover{
        color:#ffffff;
        background-color:highlight;
        width:100%;
    }
    .auto_onmouseout{
        color:#000000;
        width:100%;
        background-color:#ffffff;
    }
</style>

<!--js文件-->
<script language="javascript">

    var $id = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    }

    var Bind = function(object, fun) {
        return function() {
            return fun.apply(object, arguments);
        }
    }

    function AutoComplete(obj,arr){
        this.obj=$id(obj);//输入框
        var autodiv = document.createElement("div");//创建一个元素节点,自动完成DIV
        autodiv.setAttribute("id","autoComplete_div");//设置元素id
        autodiv.setAttribute("class","auto_hidden");//设置元素class
        this.after(autodiv);//在当前元素后面追加
        this.autoObj=$id("autoComplete_div");//DIV的根节点
        this.value_arr=arr;         //不要包含重复值
        this.index=-1;             //当前选中的DIV的索引
        this.search_value="";     //保存当前搜索的字符
        this.start();//调用程序入口方法
    }

    AutoComplete.prototype={

        init: function(){//初始化DIV的位置

            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

        },deleteDIV: function(){//删除自动完成需要的所有DIV

            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";
            }

        },autoOnmouseover: function(_this,_div_index){//模拟鼠标移动至DIV时,DIV高亮

            return function(){
                _this.index=_div_index;
                var length = _this.autoObj.children.length;
                for(var j=0;j<length;j++){
                    if(j!=_this.index ){
                        _this.autoObj.childNodes[j].className='auto_onmouseout';
                    }else{
                        _this.autoObj.childNodes[j].className='auto_onmouseover';
                    }
                }
            }

        },changeClassname: function(length){//更改classname

            for(var i=0;i<length;i++){
                if(i!=this.index ){
                    this.autoObj.childNodes[i].className='auto_onmouseout';
                }else{
                    this.autoObj.childNodes[i].className='auto_onmouseover';
                    this.obj.value=this.autoObj.childNodes[i].seq;
                }
            }

        },pressKey: function(event){//响应键盘

            var length = this.autoObj.children.length;
            if(event.keyCode==40){//光标键"↓"
                ++this.index;
                if(this.index>length){
                    this.index=0;
                }else if(this.index==length){
                    this.obj.value=this.search_value;
                }
                this.changeClassname(length);

            }else if(event.keyCode==38){//光标键"↑"
                this.index--;
                if(this.index<-1){
                    this.index=length - 1;
                }else if(this.index==-1){
                    this.obj.value=this.search_value;
                }
                this.changeClassname(length);

            }else if(event.keyCode==13){//回车键
                this.autoObj.className="auto_hidden";
                this.index=-1;

            }else{
                this.index=-1;
            }
        },after:function (newElement){//newElement是要追加的元素
            var parent = this.obj.parentNode;//找到当前元素的父节点 
            if( parent.lastChild == this.obj ){//判断当前元素是否是节点中的最后一个位置,如果是的话就直接使用appendChild方法 
                parent.appendChild(newElement,this.obj ); 
            }else{ 
                parent.insertBefore(newElement,this.obj.nextSibling ); 
            }; 

        },start: function(){//程序入口
            var thisObj=this;
            thisObj.obj.onkeyup=function(event){
                 if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){
                    thisObj.init();
                    thisObj.deleteDIV();
                    thisObj.search_value=thisObj.obj.value;
                    var valueArr=thisObj.value_arr;
                    valueArr.sort();
                    if(thisObj.obj.value.replace(/(^\s*)|(\s*$)/g,'')==""){ return; }//值为空,退出
                    try{ 
                        var reg = new RegExp("(" + thisObj.obj.value + ")","i");
                    }catch (e){
                        return; 
                    }
                    var div_index=0;//记录创建的DIV的索引
                    for(var i=0;i<valueArr.length;i++){
                        if(reg.test(valueArr[i])){
                            var div = document.createElement("div");
                            div.className="auto_onmouseout";
                            div.seq=valueArr[i];
                            div.onclick=thisObj.setValue(thisObj);
                            div.onmouseover=thisObj.autoOnmouseover(thisObj,div_index);
                            div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");//搜索到的字符粗体显示
                            thisObj.autoObj.appendChild(div);
                            thisObj.autoObj.className="auto_show";
                            div_index++;
                        }
                    }
                }
                thisObj.pressKey(event);
                window.onresize=Bind(thisObj,function(){thisObj.init();});
            };
        }
    }
</script>
<!--=================== 封装结束 ======================-->




<!--========================== 调用开始 =========================-->
<body>
    <!--第一个自动补全-->
    <input type="text"  placeholder="请输入a或b模拟效果" id="o" >

    <!--第二个自动补全-->
    <input type="text"  placeholder="请输入或2模拟效果" id="o1" >

<script>
    //实例化第一个自动补全,参数一 为元素id,参数二 为数据
    new AutoComplete('o',['b0','b12','b22','b3','b4','b5','b6','b7','b8','b2','abd','ab','acd','accd','b1','cd','ccd','cbcv','cxf']);
    //实例化第二个自动补全,参数一 为元素id,参数二 为数据
    new AutoComplete('o1',[,'22','33','13','123','1221','23','234','256','s2','12s','12sfd','1346','a22d','b2','2cd','c1cd','cb1cv']);
</script>

</body>
<!--========================== 调用结束 =========================-->


</html>