Looking for a simpler 'drop-down box with search'_html/css_WEB-ITnose

It took me a while to make a drop-down box, but it turned out that IE is not compatible. This is the correct display of Firefox and Chrome. When it comes to IE, it becomes js. Is it incompatible? So I am looking for a simpler drop-down box with search or someone. Please help me take a look at my js and css code below.

Reply to the discussion (solution)

function searchInputObject(id, valueid, zIndex) {    if (!id || !valueid) return;    var arraylist = new Array();    var ddl = document.getElementById(valueid);    for (i = 0; i < ddl.options.length; i++) {        arraylist[i] = { txt: ddl.options[i].text, val: ddl.options[i].value };    }    ddl.style.display = "none";    this.search_input_now_value = "";     this.search_input_id = id;    this.search_input_indexchanged = ddl.onchange;    this.search_input_value = document.getElementById(valueid);    this.search_input_arraylist = arraylist;    this.search_input_div1 = document.getElementById(this.search_input_id);    this.search_input_div1.className = "search_input_div1";    this.search_input_div1.innerHTML = "<INPUT id='search_input_" + this.search_input_id + "' class='search_input_input' readonly='true' >"    +    "<DIV id='search_input_div2_" + this.search_input_id + "'  class='search_input_div2' ></DIV>"    +    "<DIV id='search_input_div3_" + this.search_input_id + "' name='search_input_div3_name' class='search_input_div3'  style='display:none;' ></DIV>"    +    "<DIV id='search_input_div4_" + this.search_input_id + "' name='search_input_div4_name' class='search_input_div4'  style='display:none;' ></DIV>"    +    "<DIV id='search_input_div5_" + this.search_input_id + "' name='search_input_div5_name' class='search_input_div5'  style='display:none;line-height:20px;'> 搜索:   <input id='search_input_box_" + this.search_input_id + "' style='width:120px;height:15px;' /></DIV>";    this.search_input_div2 = document.getElementById("search_input_div2_" + this.search_input_id);    this.search_input_div3 = document.getElementById("search_input_div3_" + this.search_input_id);    this.search_input_div4 = document.getElementById("search_input_div4_" + this.search_input_id);    this.search_input_div3.innerHTML = "<table id='search_input_table_" + this.search_input_id + "' cellpadding='2' cellspacing='0'  class='search_input_table'></table>";    this.search_input_div5 = document.getElementById("search_input_div5_" + this.search_input_id);    this.search_input_box = document.getElementById("search_input_box_" + this.search_input_id);    this.search_input_table = document.getElementById("search_input_table_" + this.search_input_id);    this.search_input_input = document.getElementById("search_input_" + this.search_input_id);    if (zIndex != null) {        this.search_input_div1.style.zIndex = zIndex;        this.search_input_div2.style.zIndex = zIndex;        this.search_input_div3.style.zIndex = zIndex;        this.search_input_div4.style.zIndex = zIndex - 1;        this.search_input_div5.style.zIndex = zIndex;    }    this.search_input_input.value = search_input_get_txt(this);    search_input_load(this);}searchInputObject.prototype.search_input_hidden_div = function() {    this.search_input_div3.style.display = "none";    this.search_input_div4.style.display = "none";    this.search_input_div5.style.display = "none";}searchInputObject.prototype.search_input_show_div = function() {    this.search_input_div3.style.display = "block";    this.search_input_div4.style.display = "block";    this.search_input_div5.style.display = "block";}searchInputObject.prototype.AutoSelect = function() {    this.search_input_input.value = search_input_get_txt(this);}//根据获得 ，更新页面function search_input_load(obj) {    obj.search_input_box.onkeyup = function() { search_input_search(obj); };    obj.search_input_div2.onclick = function() { search_input_search(obj); obj.search_input_box.focus(); };    obj.search_input_input.onmouseup = function() { search_input_search(obj); obj.search_input_box.focus(); };        var list = obj.search_input_arraylist;    var table = obj.search_input_table;    for (var i = 0; i < list.length; i++) {        var row = table.insertRow(-1);        //加入一新行        row.id = list[i].val;        row.name = list[i].txt;        row.className = "search_input_out";        row.onclick = function() { obj.search_input_input.value = this.name; obj.search_input_value.value = search_input_get_val(obj, obj.search_input_input.value); if (obj.search_input_indexchanged) obj.search_input_indexchanged(); obj.search_input_hidden_div(); };        row.onmouseover = function() { this.className = "search_input_over" }        row.onmouseout = function() { this.className = "search_input_out" }        //插入个td        var td0 = row.insertCell(-1);        td0.innerHTML = list[i].txt;    }    //设置下拉div位置    var div1 = obj.search_input_div1.getBoundingClientRect();    obj.search_input_div5.style.left = -1;    obj.search_input_div5.style.top = 23;    obj.search_input_div5.style.width = obj.search_input_div1.clientWidth + 2;    obj.search_input_div3.style.left = -1;    obj.search_input_div3.style.top = 53;    obj.search_input_div3.style.width = obj.search_input_div1.clientWidth + 2;    obj.search_input_div4.style.left = -2;    obj.search_input_div4.style.top = 23;    obj.search_input_div4.style.width = obj.search_input_div1.clientWidth + 4;    obj.search_input_input.style.width = (parseInt((obj.search_input_div1.style.width).replace('px', '')) - 30) + "px";}

The upper part of js

//根据输入值查询function search_input_search(obj) {    obj.search_input_show_div();    var value1 = obj.search_input_box.value;    if (obj.search_input_now_value == value1) {        return;    } else {        obj.search_input_now_value = value1;    }    var table = obj.search_input_table;    var array_txt = value1.split(";");    var temp_txt = "";    var rows = table.rows;    for (var i = 0; i < table.rows.length; i++) {        var row = table.rows[i];        var txt = row.name;        var show_flag = 0; //        for (var j = 0; j < array_txt.length; j++) {            temp_txt = array_txt[j];            if (j < array_txt.length - 1) {                if (txt == temp_txt || CheckHasPY(txt,temp_txt)) {                    show_flag = 1;                    break;                }            }            else if (txt.indexOf(temp_txt) > -1 || CheckHasPY(txt, temp_txt)) {                show_flag = 1;                break;            } else {                show_flag = 0;            }        }        if (show_flag == 1) {            row.style.display = "block";        } else {            row.style.display = "none";        }    }}if (document.attachEvent)    document.attachEvent("onclick", hidden_search_div);else    document.addEventListener("click", hidden_search_div, false);function hidden_search_div(e) {    var target = (e && e.target) || (event && event.srcElement);    var flag = 0; //0:表示不在控件内，1:在控件内    while (target) {        if (target.getAttribute && target.getAttribute('name') == "search_input_div") {            flag = 1;            break;        }        target = target.parentNode;    }    if (flag == 0) {        var divs = document.getElementsByTagName("div");        for (var i = 0; i < divs.length; i++) {            if (divs[i] != null && (divs[i].getAttribute("name") == 'search_input_div3_name' || divs[i].getAttribute("name") == 'search_input_div4_name' || divs[i].getAttribute("name") == 'search_input_div5_name')) {                divs[i].style.display = "none";            }        }    }}

Middle part

There are many open source drop-down box plug-ins with search functions for reference, for example: FlexBox

to implement a search engine-like text box Auto-complete plug-in

http://www.17sucai.com/preview/24598/2013-08-12/Jquery implements auto-complete plug-in to imitate search engine text box/demo.html

Give me an idea: It is best not to delete or add items (rows) dispaly:none is a good choice

http://blog.csdn.net/xiaowanzi80hou/article/details/11020005
This is a drop-down box with input, which can be expanded inside. When doing event processing keyup, match and search