JS实现关键字搜索时的相关下拉字段效果
2014-08-05 00:00
821 查看
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>Hello World</title> <link href="style.css" rel="external nofollow" rel="stylesheet" type="text/css"> <script type="text/javascript"> sources= new Array("www.sina.com","www.baidu.com","www.google.com","www.sina.org","www.baidu.ogr.cn"); tabinfo = ""; flag = new Array(sources.length); for(var i=0;i<flag.length;i++) flag[i] = false ; function immediately(){ var element = document.getElementById("i1"); if("\v"=="v") { element.onpropertychange = webChange; }else{ element.addEventListener("input",webChange,false); } function webChange(){ var tab = document.all("dl1"); for(var i=0;i<flag.length;i++) flag[i] = false ;//重新初始化 if(element.value){ var content = document.getElementById("i1").value; for(var i = 0 ;i < sources.length ; i ++){ if(sources[i].indexOf(content) != -1){ flag[i] = true; } } for(var j=0;j<flag.length;j++){ if(flag[j]){//sources[j]有与文本框文字相同的内容 if(tab.rows.length>0){ for(var k=0;k<tab.rows.length;k++) if(tab.rows[k].cells[0].innerText.indexOf(content) == -1) tab.deleteRow(k); } for(var k=0;k<tab.rows.length;k++){ tabinfo += tab.rows[k].cells[0].innerText; } if(tabinfo.indexOf(sources[j]) == -1){ nrow = tab.insertRow(0); newcell = nrow.insertCell(); newcell.innerHTML = sources[j] } tabinfo = ""; } } } } } </script> <script language="javascript"> var lastObj=null; function backBlack(){ event.srcElement.style.background="gray"; forceBackC6(); if(event.srcElement.tagName=="TD"){ lastObj=event.srcElement; } fillData(); } function backC6(){ event.srcElement.style.background="#CCCCCC"; } function forceBackC6(){ if(lastObj!=null) lastObj.style.background="#F8F8FF"; } function fillData(){ if(lastObj.innerHTML!=null) document.all.i1.value=lastObj.innerHTML; } function init(){ Layer1.style.top=i1.offsetTop+40; Layer1.style.left=i1.offsetLeft; Layer1.style.visibility="visible"; } function hideBelow(){ Layer1.style.visibility="hidden"; } </script> </head> <body> <input type="text" id="i1" style="height:20px" onFocus="init()" onBlur="hideBelow()" /> <script type="text/javascript"> immediately(); </script> <div id="Layer1"> <table id="dl1" class="midHead" cellspacing="0" onMouseOut="backC6()" onMouseOver="backBlack()" border="0" > </table> </div> <br> </body> </html>
相关文章推荐
- JS实现关键字搜索时的相关下拉字段效果
- JS实现关键字搜索下拉字段
- JQuery+JS实现仿百度搜索结果中关键字变色效果
- .NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路
- JS实现搜索关键字加亮效果
- JQuery+JS实现仿百度搜索结果中关键字变色效果
- JQuery+JS实现仿百度搜索结果中关键字变色效果
- .NET中使用js实现百度搜索下拉提示效果[不是局部刷新,呜呜。。]
- .NET中使用js实现百度搜索下拉提示效果[不是局部刷新,呜呜。。]
- js实现搜索框智能提示上下移动效果
- asp.net+js实现的ajax sugguest搜索提示效果
- 用JS将搜索的关键字高亮显示实现代码
- js实现的下拉链表的联动效果
- Hack in Lucene.Net之为什么无法在搜索时统计分类下相关结果数或者实现Group By效果
- js下拉框二级关联菜单效果代码具体实现
- 用JS将搜索的关键字高亮显示实现代码
- JS实现下拉框的动态添加(附效果)
- jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
- JS 搜索定位关键字(Ctrl + F 效果)