javas
何一 2010年01月14日 星期四 13:20 | 3392次浏览 | 4条评论
经过互联网
2010
今天写了一个带下拉列表选择的文本框，实现的效果是：既可以下拉列表选择，又可以实现从文本框中直接输入，并且在输入的过程中，模糊查找下拉列表中的内容进行过滤。
这样的输入框的好处是，既可以进行选择，又可以直接输入来查找过滤,代码如下，效果需要自己动手查看。
有一个没有解决的问题是，输入中文进行过滤的时候，输入中文结束后，不切换输入法到英文状态，onkeyup事件没有相应，切换完输入法后才能正常过滤下拉列表，那位知道解决办法请踊跃留言探讨
<HTML>
<HEAD>
<LINK type="image/x-icon" rel="shortcut icon" href="./img/zeuux.ico"/>
<TITLE>下拉文本输入框</TITLE>
<SCRIPT type="text/javascript">
function Fclick()
{
/***
文本框获得焦点的时候显示下拉列表里面的所有内容
***/
moptions = document.getElementById('s_id').options;
document.getElementById('ul_id').innerHTML = '';
for(i=0;i<moptions.length;i++)
{
str = '<LI onclick="SelectLi(' + "'" + moptions[i].text + "'"+ ')" onmouseout="backcolor(this);" onmouseover="changecolor(this);">' + moptions[i].text+'</LI>'
document.getElementById('ul_id').innerHTML += str;
}
document.getElementById('ul_id').style.display = '';
}
function Fmove(event)
{
/***
文本框失去焦点的时候隐藏模拟的下拉列表层
**/
if(document.getElementById('hidden_id').value == 0)
document.getElementById('ul_id').style.display = 'none';
}
function Searchopt()
{
/***
响应键盘输入，通过正则表达式匹配下拉列表的内容并显示在模拟的下拉列表层
***/
str = document.getElementById('com_id').value;
//var1 = '/' + str + '/i';
var exreg = new RegExp(str);
moptions = document.getElementById('s_id').options;
document.getElementById('ul_id').innerHTML = '';
for(i=0;i<moptions.length;i++)
{
if(exreg.test(moptions[i].text))
{
strre = '<LI onclick="SelectLi(' + "'" + moptions[i].text + "'"+ ')" onmouseout="backcolor(this);" onmouseover="changecolor(this);">' + moptions[i].text+'</LI>'
document.getElementById('ul_id').innerHTML += strre;
}
}
document.getElementById('ul_id').style.display = '';
}
function Schange()
{
/***
改变下拉列表值时，将内容显示到文本输入框中
***/
sid = document.getElementById('s_id');
sindex = sid.selectedIndex;
document.getElementById('com_id').value = sid.options[sindex].text;
}
function SelectLi(value)
{
/***
选中模拟下拉列表中的内容的时候，将内容显示到文本框中，并隐藏模拟层
***/
document.getElementById('com_id').value = value;
document.getElementById('ul_id').style.display = 'none';
}
function changecolor(mob)
{
/***
鼠标移动到模拟层中的相应内容上时，改变其颜色，颜色可弄成和浏览器中默认下拉框获得焦点的时候的颜色一致，实现深度模拟
***/
mob.style.backgroundColor = 'red';
}
function backcolor(mob)
{
/***
鼠标离开模拟层对应内容上时，恢复其颜色
***/
mob.style.backgroundColor = 'white';
}
function giveval(val)
{
/***
隐藏变量，用于控制选择模拟下拉框时，文本输入框失去焦点的时候不关闭模拟下拉框
***/
document.getElementById('hidden_id').value = val;
}
</SCRIPT>
</HEAD>
<BODY>
<SELECT style="width:130px;" onchange="Schange();" id="s_id">
<option>小明</option>
<option>小红</option>
<option>yaoqiang</option>
<option>like</option>
<option>niujie</option>
<option>xiaofu</option>
<option>xiaowang</option>
<option>lizheng</option>
<option>sunzong</option>
<option>xiangzong</option>
</SELECT>
<!-- firefox使用oninput,ie使用onpropertychange -->
<INPUT id="com_id" style="position:absolute;margin-left:-130px;width:109px;height:24px;margin-top:1px;" onfocus="Searchopt();" onblur="Fmove(event);" oninput="Searchopt();" onpropertychange="Searchopt();"/>
<INPUT id='hidden_id' type="hidden" />
<UL id="ul_id" style="list-style:none;position: absolute; left: 10px;top: 19px; padding-left: 0px; padding-top: 0px; font-size: 13px;
border-style:solid; border-width: 1px; border-color:red; width: 126px; display: none;" onmouseover="giveval('1')" onmouseout="giveval('0')">
</UL>
</BODY>
</HTML>
评论
Zeuux © 2024
京ICP备05028076号
回复 Ford Guo 2010年01月14日 星期四 15:56
回复 何一 2010年01月15日 星期五 09:52
回复 Ford Guo 2010年01月15日 星期五 10:02
回复 何一 2010年01月15日 星期五 10:15