<!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;
//根据id获得元素
function GetById(id) {
return document.getElementById(id);
}
//根据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;
}
//填充数据到下拉框
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;
}
//操作数据
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;
}
//根据id得到数据
function GetDataById(a) {
return dat;
}
//得到前十条数据
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));
}
//显示数据
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获得焦点显示下拉框，并且会自动匹配数据
为了使问题更加突出，我删除了很多东西，只剩一个html+script+css了，现在的情况是 我在谷歌和ie9 ie10 浏览器上测试正常，在火狐上面由于没有获取到updwon的键值所以功能没有实现，不过这个好解决。
关键是ie8以及以下版本，ie8的情况是点一下不好使，多点几下就出来了，并且下拉框的样式还发生变化。ie7和ie6就是死活下拉框就不出来（这两个浏览器可以不考虑）
有没有人知道这是为什么呢，整的我都郁闷了，google bing baidu duck 各种搜索都用了，代码都重写了好几次了，除了发现一个类似的错误以外没有任何收获。
知道的大牛们 给我说说吧
添加回答
举报
0/150
提交
取消