简单实现input输入框的下拉显示-白红宇

简单实现input输入框的下拉显示

阅读量：4919 次

发布时间：2019-06-11

本文共 4722 字，大约阅读时间需要 15 分钟。

window.inputSelect = new function(){        var self = this;        var config = {            class: "inputSelect" ,  //制定好响应的input具备的class            attr : "dataName",      //设定好关联的数据类别            data: {　　　　　　　　　　//test数据类别                test : [                    { value: "text1", text : "text1" , keyword: "ssssss" },                    { value: "text2", text : "text2" , keyword: "ass" },                    { value: "text3", text : "text3" , keyword: "fswqe" },                    { value: "text4", text : "text4" , keyword: "gjqrnnczv" },                    { value: "text5", text : "text5" , keyword: "sajdhqwudh" }]            }        }        this.setData = function(name,data,bool){            if( bool && config.data[name] ){                config.data[name].concat(data);                return            }            config.data[name] = data;        };        this.getData = function(name){            return config.data[name];        };        this.bind = function(input){            var a = document.getElementsByTagName("input");            if( input ){                a = [input];            }            var className;            var _class = config.class;            var _this;            var data;            var optionStr = "";            for( var i in a ){                _this = a[0];                if(_this.type = "text"){                    className = _this.className.split(" ");                    for( var _i in className ){                        if(className[_i] === _class ){                            _this.onchange = function(e){                                 if( !this.isChange ) {                                     e.stopPropagation();                                     return;                                 }                                 this.isChange = false;                            }                            _this.oninput = function(){                                var _this = this;                                optionStr = "";                                data = self.getData(this.attributes.getNamedItem(config.attr).value);                                for( var i in data ){                                    var it = data[i];                                    if(it.keyword.indexOf(this.value) > -1 && this.value != "") {                                        optionStr += "
     
      "+ it.text +"
     
"                                    }                                }                                if(!this.optionSelect){                                    var div = document.createElement("div");                                    div.style.cssText = "position:absolute;width:"+ this.offsetWidth +"px;left:"+this.offsetLeft+"px;top:"+ (this.offsetTop + this.offsetHeight) +"px;";                                    div.innerHTML = optionStr                                    div.onclick = function(e){                                        _this.value = e.target.attributes.getNamedItem("value").value;                                        _this.isChange = true;                                        (jQuery && jQuery(_this).change() ) || (_this.onchange && _this.onchange() );                                    };                                    this.optionSelect = div;                                    if(optionStr != "")                                        this.after(div);                                    else                                        div.remove();                                }else{                                    var div = this.optionSelect;                                    div.innerHTML = optionStr;                                    if(optionStr != "")                                        this.after(div);                                    else                                        div.remove();                                                                    }                                if(!this.onblur) {                                    this.onblur = function(){                                        var div = this.optionSelect;                                        setTimeout(function(){                                            div.remove();                                            div = null;                                            this.onblur = null;                                        },100)                                    }                                }                            }                        }                    }                };            }        }();    }();