<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var dat = [{ value: '-1', text: '請選擇' }, { value: '0', text: '選項一' }, { value: '1', text: '選項二' }, { value: '2', text: '選項三' }, { value: '4', text: '選項四'}];
var Li_Count = 0;
var li_index = 0;
//根據(jù)id獲得元素
function GetById(id) {
return document.getElementById(id);
}
//根據(jù)id獲得選項
function GetItem(id, q) {
return document.getElementById(id + '_hehe').getElementsByTagName('li').item(q);
}
//突出顯示元素
function Tucu(a) {
a.setAttribute('class', 'tuchu');
}
//重置元素
function Chongzhi(a) {
a.setAttribute('class', 'chongzhi');
}
//重置所有選項
function Chongzhisuoyou(id) {
var lis = document.getElementById(id + '_hehe').getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis.item(i).setAttribute('class', 'chongzhi');
}
}
//顯示下拉框
function Showli(id) {
var style = document.getElementById(id + '_hehe').getAttribute('style');
document.getElementById(id + '_hehe').setAttribute('style', style + 'display:block;z-index:100;');
}
function DwonZ_index(id) {
var style = document.getElementById(id + '_hehe').getAttribute('style');
document.getElementById(id + '_hehe').setAttribute('style', style + 'z-index:1;');
}
//隱藏下拉框
function Displayli(id) {
var style = document.getElementById(id + '_hehe').getAttribute('style');
document.getElementById(id + '_hehe').setAttribute('style', style + 'display:none;');
Clearli(id);
li_index = 0;
Li_Count = 0;
}
//圖片選中效果
function bian(a, b, c) {
if (a == 0) {
b.setAttribute("src", "Img.jpg");
} else {
b.setAttribute("src", "Img1.jpg");
}
}
//給文本框賦值
function FullInputText(id, a) {
GetById(id + '_inputtext').value = a;
}
//給Text和Value賦值
function FullTextAndValue(id, texts, values) {
document.getElementById(id + '_realvalue').value = values;
document.getElementById(id + '_realtext').value = texts;
}
//填充數(shù)據(jù)到下拉框
function FullDataToList(id, list) {
document.getElementById(id + '_hehe').innerHTML = list;
}
//聚焦選項
function jujiao(id, a) {
Tucu(a);
FullInputText(id, a.innerHTML);
}
//選中選項
function xuanzhong(id, a) {
if (a == null) {
return;
}
FullInputText(id, a.innerHTML);
FullTextAndValue(id, a.innerHTML, a.getAttribute('data'));
Displayli(id);
}
//清除選項
function Clearli(id) {
FullDataToList(id, '');
}
//按下事件
function fuck(id) {
if (window.event) {
var key = window.event.keyCode;
} else {
var key = event.which;
}
if (key == 38) {
li_index--;
} else if (key == 40) {
li_index++;
} else {
return;
}
if (li_index > Li_Count - 1) {
li_index = Li_Count - 1;
}
if (li_index < 0) {
li_index = 0;
}
aa = true;
setTimeout('timer("' + id + '")', 10);
}
//選擇延遲效果
function timer(id, in_index) {
var a = document.getElementById(id + '_hehe').getElementsByTagName('li').item(li_index);
Chongzhisuoyou(id);
Tucu(a);
FullInputText(id, a.innerHTML);
aa = false;
}
//操作數(shù)據(jù)
function OperateData(s, data) {
var list = '';
var count = 0;
for (var i = 0; i < data.length; i++) {
if (count > 10) {
return;
}
if (data[i].text.search(s) >= 0) {
list += "<li style='font-size:12px;border: 1px dotted #FFFFFF; 'data= " + data[i].value + "onmouseover= 'Tucu(this)' onmouseout='Chongzhi(this)' onclick='xuanzhong(this)'>" + data[i].text + "</li>";
count++;
}
Li_Count = count;
}
return list;
}
//根據(jù)id得到數(shù)據(jù)
function GetDataById(a) {
return dat;
}
//得到前十條數(shù)據(jù)
function GetTop10(id) {
var list = '';
var num = 0;
var data = GetDataById(id);
if (data.length < 10) {
num = data.length;
} else {
num = 10;
}
for (var i = 0; i < num; i++) {
list += "<li style='font-size:12px;border: 1px dotted #FFFFFF; 'data= " + data[i].value + " onmouseover= 'Tucu(this)' onmouseout='Chongzhi(this)' onclick='xuanzhong( \"" + id + "\",this)'>" + data[i].text + "</li>";
}
Li_Count = num;
return list;
}
//顯示前10條
function ShowTop10(id) {
document.getElementById(id + '_inputtext').focus();
FullDataToList(id, GetTop10(id));
Showli(id);
Tucu(GetItem(id, 0));
}
//顯示數(shù)據(jù)
function show(id) {
if (window.event) {
var key = window.event.keyCode;
} else {
var key = event.which;
}
if (key == 8 && GetById(id + '_inputtext').value == '') {
ShowTop10(id);
return;
}
//Enter
if (key == 13) {
if (li_index == -1) {
return;
} else {
xuanzhong(id, GetItem(id, li_index));
return;
}
}
if (key == 38 || key == 40) {
return;
}
var list = OperateData(GetById(id + '_inputtext').value, GetDataById(id));
if (GetById(id + '_inputtext').value == '') {
Displayli(id);
} else if (list != '') {
FullDataToList(id, list);
Showli(id);
var a = GetItem(id, li_index);
Tucu(a);
}
}
</script>
<style type="text/css">
.chongzhi
{
background-color: White;
color: Black;
}
.tuchu
{
border: 1px dotted #000000;
background-color: #3D93E8;
color: White;
}
li
{
text-align: left;
list-style: none;
margin-left: -40px;
}
ul
{
background-color: White;
}
</style>
</head>
<body>
<div id="InputDropDownList1" style="padding: 0px;">
<input type='hidden' id='InputDropDownList1_realtext' name='InputDropDownList1text'
value='' />
<input type='hidden' id='InputDropDownList1_realvalue' name='InputDropDownList1value'
value='' />
<input type='text' id='InputDropDownList1_inputtext' onclick='ShowTop10("InputDropDownList1")'
style='height: 13px; width: 150px; float:left;font-size: 12px;' onkeydown='fuck("InputDropDownList1")'
onkeyup='show("InputDropDownList1")' value='' />
<img src='Img.jpg' style='float:left; margin-left:-18px; margin-top:2px; ' onmousemove='bian(1,this)'
onmouseout='bian(0,this)' onclick='ShowTop10("InputDropDownList1")' />
<ul id='InputDropDownList1_hehe' style='clear:left; margin-top:18px; position: absolute; width: 110px; margin-left: 0px;
display: none; border: thin groove #C0C0C0; '>
</ul>
</div>
</body>
</html>
這是一個可輸入的下拉框，可以通過使input獲得焦點顯示下拉框，并且會自動匹配數(shù)據(jù)
為了使問題更加突出，我刪除了很多東西，只剩一個html+script+css了，現(xiàn)在的情況是 我在谷歌和ie9 ie10 瀏覽器上測試正常，在火狐上面由于沒有獲取到updwon的鍵值所以功能沒有實現(xiàn)，不過這個好解決。
關(guān)鍵是ie8以及以下版本，ie8的情況是點一下不好使，多點幾下就出來了，并且下拉框的樣式還發(fā)生變化。ie7和ie6就是死活下拉框就不出來（這兩個瀏覽器可以不考慮）
有沒有人知道這是為什么呢，整的我都郁悶了，google bing baidu duck 各種搜索都用了，代碼都重寫了好幾次了，除了發(fā)現(xiàn)一個類似的錯誤以外沒有任何收獲。
知道的大牛們 ?給我說說吧
一個關(guān)于瀏覽器兼容的問題
慕村225694
2018-12-07 12:12:10
