花了一段时间弄了个下拉框 结果ie还不兼容 这是火狐和Chrome的正确显示 到了ie就变成 难道是js不兼容么 所在这求一个简易点的带搜索下拉框 或者哪位大大帮忙看下我的js和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 = "<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";}
//根据输入值查询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的时候匹配查找一下
