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

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