最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS Select下拉框(支持输入模糊查询)
时间:2017-03-13 编辑:简简单单 来源:一聚教程网
代码如下 | 复制代码 |
function SelectValue(obj) { document.all.box2.value = obj.options[obj.selectedIndex].text; } var j = 0; function InputValue(obj) { var n = 1; var tmpObj; var src = document.all.SelectOption; var msg = document.all.msg; if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){ if(obj.value!=""){ msg.style.display=""; msg.innerHTML=""; if(msg.hasChildNodes()) { msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]); }
for (var i=0;i varselValue=document.createElement("div"); varselText=document.createElement("div"); selText.value=src(i).value; selText.innerHTML=src(i).text; if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){ selText.setAttribute("id","selText"+n); selText.onmouseover=function(){ this.style.backgroundColor='#003399'; this.style.color='#ffffff'; } selText.onmouseout=function(){ this.style.backgroundColor='#ffffff'; this.style.color='#000000'; } selText.onclick=function(){ document.all.box2.value=this.innerHTML; msg.style.display="none"; document.getElementById("txtSection").value=this.value; } msg.appendChild(selText); n++; } } } else { document.all.msg.style.display="none"; } } else { //press down key if(event.keyCode==40){ j++; for (vari=0; i { tmpObj=document.getElementById("selText"+i); if(tmpObj != null){ tmpObj.style.backgroundColor='#ffffff'; tmpObj.style.color='#000000'; } } tmpObj=document.getElementById("selText"+j); if(tmpObj != null){ tmpObj.style.backgroundColor='#003399'; tmpObj.style.color='#ffffff'; }else{ j=0; } } //press up key if (event.keyCode==38){ j--; for (vari=0; i { tmpObj=document.getElementById("selText"+i); if(tmpObj != null){ tmpObj.style.backgroundColor='#ffffff'; tmpObj.style.color='#000000'; } } tmpObj=document.getElementById("selText"+j); if(tmpObj != null){ tmpObj.style.backgroundColor='#003399'; tmpObj.style.color='#ffffff'; }else{ j=2; } } //press enter key if (event.keyCode==13){ tmpObj=document.getElementById("selText"+j); document.all.box2.value=tmpObj.innerHTML; msg.style.display="none"; document.getElementById("txtSection").value=tmpObj.value; } } } function SelMatch(src) { varcurrSel=document.all.box2.value; for (vari=0;i if (src(i).text==currSel) { src.options(i).selected=true; } } } function NoMsg() { if(document.activeElement.id=="msg") return false; else document.all.msg.style.display='none'; } width:230px;position:absolute;left:0px;top:20px;display:none"> |
-
上一个: 原生js实现打字动画游戏
-
下一个: 原生js开发的日历插件
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31