类似google搜索自动显示搜索结果例子

最新推荐文章于 2024-08-04 15:50:57 发布
最新推荐文章于 2024-08-04 15:50:57 发布
阅读量89 收藏
点赞数
分类专栏： JavaScript总结 文章标签： Google 华为 Nokia 

<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>

penghuaiyi2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android仿百度谷歌搜索自动提示框AutoCompleteTextView简单应用示例
01-05
事实上,Android 的AutoCompleteTextView Widget ,只要搭配ArrayAdapter 就能设计同类似Google 搜索提示的效果. 本例子先在Layout 当中布局一个AutoCompleteTextView Widget ,然后通过预先设置好的字符串数组,将此...
搜索引擎的原理及应用.pdf
06-16
这类搜索引擎能够提供更加精确和专业化的搜索结果，如Google学术就是一个典型例子，它不仅可以帮助用户找到包含特定关键词的学术文章，还可以提供相关的引用信息和学术影响力评估。 3. **本地搜索**：大多数搜索...
一个快速实现搜索智能提示的方法
lihui4291的博客
05-28 9467
对于很多网站或者系统，基本都会有搜索框，对于搜索框如何做智能提示呢，如果自己开发还是需要花费一些工作量的，既然这样，那么可不可以使用他人已经做好的轮子呢，答案是可以，我们要做的就是使用智能提示插件。这里就有一款智能提示插件，名字叫"Smart Autocomplete"，网址是www.92find.com。
Google引擎搜索技巧
Sevieryang/FinTech/Statistics/Quant
01-14 678
Google高级搜索命令 2017年02月17日 10:29:30 shuimuzy 阅读数：8869 标签： Google search 更多 个人分类： Goolge搜索 一、site，指定搜索的某個網站。例：desire site:bbs.gfan.com 二、filetype，指定搜索的文件類型。例：seo filetype:doc 三、双引号，代表完全匹配，使关键词不分开，顺序都不能变...
Google搜索从入门到精通 v4.0
weixin_42220130的博客
01-16 1289
Google搜索从入门到精通 v4.0 （一） 1、前言 我是在2000年上半年知道Google的。在这之前，我搜索英文信息通常用AltaVista，而搜索中文信息则常用Sina。但自使用了Google之后，它便成为我的Favorite Search engine了。这也得感谢新浪网友曹溪，因为当初正是因为他的大力推介，才使我识得了Google。 记得1996年夏季的时候，当我第一次接触Internet，便被扑面而来的魔力征服了。那种天涯咫尺的感觉，真是妙不可言。在经历了疯狂的WWW冲浪和如痴如醉的BBS沉
这些 Google 高级搜索技巧，你都知道么？
热门推荐
胡西风的博客
08-18 3万+
Google是一个搜索引擎，由两个斯坦福大学博士生Larry Page与Sergey Brin于1998年9月发明，Google Inc. 于1999年创立。2000年7月份，Google替代Inktomi成为Yahoo公司的搜索引擎，同年9月份，Google成为中国网易公司的搜索引擎。98年至今（原文发布于2008年12月25日），Google已经获得30多项业界大奖。
折戟 AI 搜索，谷歌是否已死？
AI科技大本营
05-27 7149
文| 王启隆出品丨AI 科技大本营（ID：rgznai100）本月中旬的 Google I/O 大会上，AI 成为绝对焦点，Google高管在主题演讲中提及“AI”一词超过 120次，凸显了其战略重要性。为了应对 OpenAI “咄咄逼人”的宣发攻势以及竞争对手 Perplexity 在背后的凶猛追击，谷歌推出了搜索引擎 25 年以来的最大更新：“AI Overviews”。此后，数亿计的 ...
18个高效使用Google搜索的技巧
三劫散仙
03-22 5577
前言 如果把浩瀚的互联网资源比喻成是一个图书馆，那么google搜索引擎毫无疑问是这个图书馆的导航中心，通过google可以轻而易举得检索到绝大多数你需要的资料，然而大多数人可能并没有充分发挥谷歌搜索的潜力。 如何才能更加高效，快速的利用好谷歌这个搜索引擎呢？这里有18个技巧用来提升你的检索效率。 1.使用Tab面板 使用谷歌使用结果完成后，在搜索栏的下面会出现多个Tab面板，默认分别...
Google高级搜索命令
wqhlmark64的博客
09-20 6649
一、site，指定搜索的某個網站。例：desire site:bbs.gfan.com 二、filetype，指定搜索的文件類型。例：seo filetype:doc 三、双引号，代表完全匹配，使关键词不分开，顺序都不能变。 四、减号，事搜索结果更准确。减号与前一个关键词之间一定要有一个空格，与后一个关键词之间一定不能有空格。搜索结果为，匹配前一个关键词但不匹配后一个关键词的结果。例如：seo -...
算法高级（32）-搜索引擎中的自动补全功能该如何实现？
十步杀一人-千里不留行
09-21 5816
前一章讲了搜索中的拼写纠错功能，里面一个很重要的概念就是莱文斯坦距离。这章会讲解搜索中提升用户体验的另一项功能-自动补全。本章直接介绍ES中的实现方式以及真正的搜索引擎对自动补全功能的优化。 大家对上面的这个应该都不陌生，搜索引擎会根据你输入的关键字进行一些提示，这样用户只需要输入部分内容就可以进行选择了。尤其在移动端会比较方便。淘宝、京东的搜索也有类似的功能，只不过行业不同，提示出来的内容...
怎样量化评价搜索引擎的结果质量
一座青山的专栏
09-05 1万+
转载自：http://www.cnblogs.com/scnucs/archive/2012/10/10/2718503.html 搜索质量评估是搜索技术研究的基础性工作，也是核心工作之一。评价（Metrics）在搜索技术研发中扮演着重要角色，以至于任何一种新方法与他们的评价方式是融为一体的。   搜索引擎结果的好坏与否，体现在业界所称的在相关性（Relevance）上。相关性的
jquery搜索页面仿google
11-17
模糊查询是 Google 搜索的一大亮点，它允许用户在输入框中输入关键词时，系统会自动匹配并显示相关的结果。在 jQuery 中，我们可以利用 `keyup` 事件监听用户的输入，并实时更新搜索结果。例如： ```javascript $(...
AutoComplete例子像Google搜索栏
12-25
标题中的“AutoComplete例子像Google搜索栏”表明我们要探讨的是一个使用.NET AJAX框架实现的类似于谷歌搜索栏...通过适当配置和自定义，我们可以创建出类似谷歌搜索栏的高级功能，提升应用程序的整体性能和用户体验。
Android仿QQ附近的人搜索展示功能
09-02
在Android开发中，"仿QQ附近的人...通过以上步骤，我们可以逐步构建出一个类似QQ的“附近的人”搜索展示功能。需要注意的是，实际开发中还需要考虑性能优化、用户体验以及异常情况的处理，确保功能的稳定性和可维护性。
十大高明的Google搜索技巧
齐枫的博客
01-03 1793
前言：多数人在使用Google搜索的过程是非常低效和无谓的，如果你只是输入几个关键词，然后按搜索按钮，你将是那些无法得到Google全部信息的用户，在这篇文章中，Google搜索专家迈克尔.米勒将向您展示如何更智能、更高效地进行Google的系列搜索。 　　Google是一个非常精密成熟的搜索引擎，但大多数的用户都没有能完全地利用到它的能力。一般人就是在Google的搜索框中输入一两个关键字
华为：网络设备（ensp）利用ftp，上传下载文件至电脑
qq_59718828的博客
08-04 409
（传文件前需确保电脑至路由器的网络是连通的，如是ensp操作，可参考ensp与电脑网络互联文章。3、在电脑cmd里下载路由器内的文件，以下载sslvpn.zip为例。使用put命令（需要注意上传文件填写的文件名需要包含后缀名）5、路由器上检查文件，text.xlsx已上传成功。此时，电脑对应目录下就下载到了路由器上的文件。查看路由器内现在flash：下有哪些文件。先将需要上传的文件剪切至电脑对应目录下。二、电脑通过ftp登录到路由器上。4、上传电脑的文件到路由器上。一、配置ftp服务器、
新闻阅读器.rar
最新发布
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
Windows Server 2008R2 sp1 升级 Service Pack 1
08-04
windows Server 2008 R2 Standard 升级 Service Pack 1 《Windows Server 2008 R2 SP1与IE11及依赖包详解》 Windows Server 2008 R2 SP1（Service Pack 1）是微软公司针对其服务器操作系统Windows Server 2008 R2的一个重要更新，旨在增强系统性能、提升安全性，并修复了大量已知问题。SP1的引入，不仅包含了自Windows Server 2008 R2发布以来的所有累积更新，还提供了对新技术的支持，例如Hyper-V 3.0虚拟化技术，提高了云计算和数据中心的管理效率。 IE11（Internet Explorer 11）是微软推出的最后一个版本的传统IE浏览器，对于Windows Server 2008 R2 SP1来说，这是一个重要的升级。IE11带来了更快的网页加载速度、更好的标准支持以及增强的安全特性。它支持HTML5、CSS3等现代Web技术，提供了更好的用户体验，并且增强了对企业级应用的兼容性。
Java + jQuery 实现Google/Baidu搜索自动提示功能
"这是一个关于使用Java和jQuery实现类似Google、百度搜索自动提示效果的教程。" 在Web开发中，用户友好的交互设计能显著提升用户体验，其中搜索框的自动提示功能就是一个很好的例子。这个项目旨在利用Java后端和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值