求一个简易点的“带搜索的下拉框”_html/css_WEB-ITnose

回复讨论(解决方案)

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 = ""    +    "
"    +    "
"    +    "
"    +    "
 搜索:   
";    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 = "";    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";}

//根据输入值查询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";            }        }    }}

有很多开源的带搜索功能的下拉框插件可以参考下，例如: FlexBox

实现仿搜索引擎文本框自动补全插件

http://www.17sucai.com/preview/24598/2013-08-12/Jquery%E5%AE%9E%E7%8E%B0%E4%BB%BF%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E6%96%87%E6%9C%AC%E6%A1%86%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8%E6%8F%92%E4%BB%B6/demo.html

给个思路：最好不要删除或添加项（行）dispaly:none回是一个好的选择

http://blog.csdn.net/xiaowanzi80hou/article/details/11020005
这个是个带输入的下拉框，可以在里面扩展，做事件处理keyup的时候匹配查找一下