类似google搜索自动显示搜索结果例子
编程技术 / houtizong 发布于 3年前 71
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>网元选择</title><link href="../css/all.css" rel="stylesheet" type="text/css"><link href="../css/forms.css" rel="stylesheet" type="text/css"> <script> function searchNe() { clearTable(); var tb=document.getElementById("neList"); var nename=document.all.neName.value; if(nename!="") { var tr=tb.insertRow(); tr.style.cursor="hand"; tr.onclick=function(){ var neName=this.cells[1].innerHTML; window.returnValue={"neName":neName}; window.close(); }; tr.onmouseover=function(){ this.style.backgroundColor="#d3dfff";} tr.onmouseout=function(){ this.style.backgroundColor="";} var td0=tr.insertCell(); td0.innerHTML="1"; var td1=tr.insertCell(); td1.innerHTML=nename.toUpperCase(); var td2=tr.insertCell(); td2.innerHTML="西门子"; var td3=tr.insertCell(); td3.innerHTML="10FE0"+(i+1); var td4=tr.insertCell(); td4.innerHTML="郑州北环生产楼7楼"; var td5=tr.insertCell(); td5.innerHTML="西门子汇接局"; var td6=tr.insertCell(); td6.innerHTML="正常"; var td7=tr.insertCell(); td7.innerHTML=""; } else { var ne=["ZZA1","ZZG12","ZZDS1","ZZDM101","ZZL3","ZZGS101","ZZMGA4"]; for(var i=0;i<ne.length;i++) { var tr=tb.insertRow(); tr.style.cursor="hand"; tr.onclick=function(){ var neName=this.cells[1].innerHTML; window.returnValue={"neName":neName}; window.close(); }; tr.onmouseover=function(){ this.style.backgroundColor="#d3dfff";} tr.onmouseout=function(){ this.style.backgroundColor="";} var td0=tr.insertCell(); td0.innerHTML=i+1; var td1=tr.insertCell(); td1.innerHTML=ne[i]; var td2=tr.insertCell(); td2.innerHTML="西门子"; var td3=tr.insertCell(); td3.innerHTML="10FE0"+(i+1); var td4=tr.insertCell(); td4.innerHTML="郑州北环生产楼7楼"; var td5=tr.insertCell(); td5.innerHTML="西门子汇接局"; var td6=tr.insertCell(); td6.innerHTML="正常"; var td7=tr.insertCell(); td7.innerHTML=""; } } } /** *删除表格中的所有行 */ function clearTable() { var tab=document.getElementById("neList"); for(var i=tab.rows.length-1;i>0;i--) { tab.deleteRow(i); } } //返回html控件的坐标 function getPoint(id){ var htmlObj = document.getElementById(id); var rd = {x:0,y:0}; while(htmlObj){ rd.x += htmlObj.offsetLeft; rd.y += htmlObj.offsetTop; htmlObj= htmlObj.offsetParent; } return rd;} function show() { document.getElementById("useState").style.display="none"; var ne=["ZZA1","ZZG12","ZZDS1","ZZDM101","ZZL3","ZZGS101","ZZMGA4"]; var s=document.getElementById("neName"); if(s.value=="") return; var rd=getPoint("neName"); var pop=document.getElementById("pop"); pop.style.display="block"; pop.style.border="1px solid #FF9933"; pop.style.background="white"; pop.style.left=rd.x+1+"px"; pop.style.top=rd.y+s.offsetHeight+"px"; pop.style.width=s.offsetWidth; removeAllRows("result"); var tb=document.getElementById("result"); for(var i=0;i<ne.length;i++) { var tr=tb.insertRow(); tr.onmouseout = function(){this.style.background="";}; tr.onmouseover = function(){this.style.background="#e1e8ff";}; tr.onclick=bb; var td0=tr.insertCell(); td0.style.border="0"; td0.innerHTML=ne[i]; } var tr=tb.insertRow(); var td=tr.insertCell(); td.align="right"; td.style.border="0"; td.innerHTML="<a href='#' onclick=closeDiv()>关闭</a>" } /** *删除表格中的所有行 */ function removeAllRows(id) { var tab=document.getElementById(id); for(var i=tab.rows.length-1;i>=0;i--) { tab.deleteRow(i); } } function closeDiv() { document.getElementById("pop").style.display="none"; document.getElementById("useState").style.display=""; } function bb() { document.all.neName.value=this.cells[0].innerHTML; document.getElementById("useState").style.display=""; } </script></head><body><div class="history-item"><div class="title">网元查询</div><div class="search"><form action="#" name="fm" method="post"><table class="table"> <tr> <td width="4%" rowspan="3"><img src="../css/table/search.gif" width="40" height="39"></td> <td>网元名称</td><td><input name="neName" id="neName" type="text" onKeyup="show()" class="text"><div id="pop" style="position:absolute;display:none"> <table id="result" width="100%"></table></div></td> <td>网元类别</td> <td><select name="neType" class="select"> <option>请选择</option> <option>BELL LSTP</option> <option>端局华为软交换</option> <option>G9关口局</option> <option>智能网</option> <option>彩铃</option> <option>端局</option> <option>G6关口局</option> <option>华为软交换</option> <option>华为STP</option> <option>BELL HSTP</option> <option>西门子汇接局</option> </select></td> <td>厂商</td> <td><select name="factory" class="select"> <option>请选择厂商</option> <option value="西门子">西门子</option> <option value="BELL">BELL</option> <option value="华为">华为</option> <option value="NOKIA">NOKIA</option> <option value="AIP厂家">AIP厂家</option> <option value="彩铃厂商">彩铃厂商</option> <option value="思科">思科</option> </select></td> <td rowspan="3"><input type="button" class="button" value="查 询" onClick="searchNe()"></td> </tr> <tr> <td>信令点编码</td> <td ><input name="linkCode" type="text" class="text"></td> <td>所属机房</td> <td><select name="select4" class="select"> <option>请选择</option> <option value="562">安阳市黄河路机房</option> <option value="46">许昌许扶路5502局3楼</option> <option value="45">开封宋城路1号生产楼5楼</option> <option value="44">李万机房</option> <option value="43">新乡平原路398号移动大楼10楼</option> <option value="42">东风路机房</option> </select></td> <td >设备型号</td> <td ><input name="text22" type="text" class="text"></td> </tr> <tr> <td>使用状态</td> <td ><select name="select2" id="useState" class="select"> <option>正常</option> <option>故障</option> <option>工程</option> <option>割接</option> <option>退网</option> </select></td> <td>网元编码</td> <td><input name="text23" type="text" class="text"></td> <td> </td> <td> </td> </tr> </table></form></div><div class="history-item-title">网元信息</div><div class="history-item-content"><table class="listTable" id="neList"> <tr class="header"> <td class="xuhao">序号</td> <td>网元名称</td> <td>厂商</td> <td>信令编码</td> <td>所属机房</td> <td>网元类别</td> <td>使用状态</td> <td>网元编码</td> </tr></table></body></html><script>document.body.onclick = function() { var srcE=window.event.srcElement;if(srcE.id!="pop" && srcE.id!="neName") { document.getElementById("pop").style.display="none"; document.getElementById("useState").style.display="";} }</script> 请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
