JS实现仿google、百度搜索框输入信息智能提示的实现方法

首页

web前端

js教程

JS实现仿google、百度搜索框输入信息智能提示的实现方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:03 PM

js 搜索框智能提示百度

本文实例讲述了JS实现仿google、百度搜索框输入信息智能提示的实现方法。分享给大家供大家参考。具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>仿google、百度搜索框输入信息智能提示的实现</title>
 <style type="text/css" media="screen">
  body
  {
   font: 11px arial;
  }
  .suggest_link
  {
   width:120px;
   background-color: #FFFFFF;
   padding: 2px 6px 2px 6px;
  }
  .suggest_link_over
  {
   width:120px;
   background-color: #E8F2FE;
   padding: 2px 6px 2px 6px;
  }
  #suggestResult
  {
   position: absolute;
   background-color: #FFFFFF;
   text-align: left;
   border: 1px solid #000000;
  }
  /*input*/
  .input_on
  {
   padding: 2px 8px 0pt 3px;
   height: 18px;
   border: 1px solid #999;
   background-color: #FFFFCC;
  }
  .input_off
  {
   padding: 2px 8px 0pt 3px;
   height: 18px;
   border: 1px solid #CCC;
   background-color: #FFF;
  }
  .input_move
  {
   padding: 2px 8px 0pt 3px;
   height: 18px;
   border: 1px solid #999;
   background-color: #FFFFCC;
  }
  .input_out
  {
   /*height:16px;默认高度*/
   padding: 2px 8px 0pt 3px;
   height: 18px;
   border: 1px solid #CCC;
   background-color: #FFF;
  }
 </style>
 <script language="javascript" type="text/javascript">
  var $ = document.getElementById;
  //创建XMLHttpRequest对象  
  function createXMLHttpRequest() {
   var obj;
   if (window.XMLHttpRequest) { //Mozilla 浏览器
    obj = new XMLHttpRequest();
   }
   else if (window.ActiveXObject) { // IE浏览器
    try {
     obj = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
     try {
      obj = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e) { }
    }
   }
   return obj;
  }
  //当输入框的内容变化时，调用该函数
  function searchSuggest() {
   var inputField = $("txtSearch");
   var suggestText = $("suggestResult");
   if (inputField.value.length > 0) {
    var o = createXMLHttpRequest();
    var url = "SearchResult.ashx&#63;searchText=" + escape(inputField.value);
    o.open("GET", url, true);
    o.onreadystatechange = function () {
     if (o.readyState == 4) {
      if (o.status == 200) {
       var sourceItems = o.responseText.split("\n");
       if (sourceItems.length > 1) {
        suggestText.style.display = "";
        suggestText.innerHTML = "";
        for (var i = 0; i < sourceItems.length - 1; i++) {
         var sourceText = sourceItems[i].split("@")[1];
         var sourceValue = sourceItems[i].split("@")[0];
         var s = "<div onmouseover=\"javascript:suggestOver(this);\" ";
         s += " onmouseout=\"javascript:suggestOut(this);\" ";
         s += " onclick=\"javascript:setSearch('" + sourceText + "','" + sourceValue + "');\" ";
         s += " class=\"suggest_link\" >" + sourceText + "</div>";
         suggestText.innerHTML += s;
        }
       }
       else {
        suggestText.style.display = "none";
       }
      }
     }
    }; //指定响应函数
    o.send(null); // 发送请求
   }
   else {
    suggestText.style.display = "none";
   }
  }
  function delayExecute() {
   $("valueResult").value = "";
   window.setTimeout(function () { searchSuggest() }, 800);
   //延时处理
  }
  function suggestOver(div_value) {
   div_value.className = "suggest_link_over";
  }
  function suggestOut(div_value) {
   div_value.className = "suggest_link";
  }
  function setSearch(a, b) {
   $("txtSearch").value = a;
   $("valueResult").value = b;
   var div = $("suggestResult");
   div.innerHTML = "";
   div.style.display = "none";
  }
  function showResult() {
   alert($("txtSearch").value + $("valueResult").value);
  }
 </script>
</head>
<body>
 <form id="form1" action="">
 <input type="text" id="txtSearch" name="txtSearch" onkeyup="delayExecute();" size="20"
  class="input_out" onfocus="this.className='input_on';this.onmouseout=''"
  onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};"
  onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" />
 <input type="hidden" id="valueResult" name="valueResult" value="" />
 <br />
 <div id="suggestResult" style="display: none">
 </div>
 <br/>
 <input id="button1" type="button" value="提交" onclick="showResult();" />
 </form>
</body>
</html>

登录后复制

服务器端C#代码

<%@ WebHandler Language="C#" Class="SearchResult" %>
using System;
using System.Web;
using System.Data;
public class SearchResult : IHttpHandler {
 public void ProcessRequest (HttpContext context) {
  object QueryWord=context.Request.QueryString["searchText"];
  if (QueryWord != null)
  {
   if (QueryWord.ToString().Trim().Length > 0)
   {
    DataTable dt = getDB();
    string returnText = "";
    if (dt != null && dt.Rows.Count > 0)
    {
     DataRow[] dr = dt.Select(" name like '%" + QueryWord .ToString()+ "%' ");
     if (dr.Length > 0)
     {
      for (int i = 0; i < dr.Length; i++)
      {
       //可设置返回多字符串
       returnText += dr[i]["id"].ToString() + "@" + dr[i]["name"].ToString() + "\n";
      }
     }
    }
    context.Response.Write(returnText);
    context.Response.End();
   }
  }  
 }
 public bool IsReusable {
  get {
   return false;
  }
 }
 /// <summary>
 /// 获取数据源的方法
 /// </summary>
 /// <returns>数据源</returns>
 private DataTable getDB()
 {
  DataTable dt = new DataTable();
  dt.Columns.Add("id");
  dt.Columns.Add("name");
  dt.Columns.Add("age");
  dt.Rows.Add(new object[] { "000001", "张三", "26" });
  dt.Rows.Add(new object[] { "000002", "张晓", "26" });
  dt.Rows.Add(new object[] { "000003", "张岚", "27" });
  dt.Rows.Add(new object[] { "000004", "李四", "25" });
  dt.Rows.Add(new object[] { "000005", "李星", "27" });
  return dt;
 }
}

登录后复制

希望本文所述对大家的javascript程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1666

CakePHP 教程

1425

Laravel 教程

1325

PHP教程

1273

C# 教程

1252

显示更多

Related knowledge

2 个月不见，人形机器人 Walker S 会叠衣服了 Apr 03, 2024 am 08:01 AM

机器之能报道编辑：吴昕国内版的人形机器人+大模型组队，首次完成叠衣服这类复杂柔性材料的操作任务。随着融合了OpenAI多模态大模型的Figure01揭开神秘面纱,国内同行的相关进展一直备受关注。就在昨天，国内"人形机器人第一股"优必选发布了人形机器人WalkerS深入融合百度文心大模型后的首个Demo，展示了一些有趣的新功能。现在，得到百度文心大模型能力加持的WalkerS是这个样子的。和Figure01一样，WalkerS没有走动，而是站在桌子后面完成一系列任务。它可以听从人类的命令，折叠衣物

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

百度Apollo重磅发布全球首个支持L4级自动驾驶的大模型Apollo ADFM Jun 04, 2024 pm 08:01 PM

5月15日，百度Apollo在武汉百度萝卜快跑汽车机器人智行谷举办ApolloDay2024，全方位展示百度十年深耕自动驾驶的重大进展，基于大模型带来技术阶跃、面向乘客安全全新定义的无人车和全球最大的无人车自动运营网络，百度已经做到自动驾驶比人类驾驶更安全。得益于此，更加安全舒适、绿色低碳的出行方式正从理想成为现实。百度集团副总裁、智能驾驶事业群组总裁王云鹏现场表示：“我们做无人车的初衷，是满足老百姓日益增长的、对美好出行的向往，人民群众的满意是我们前进的动力。因为安全、所以美好，我们欣喜地看到

百度李彦宏率队拜访中国石油，讨论油气行业智能化 May 07, 2024 pm 06:13 PM

本站5月7日消息，5月6日，百度创始人、董事长兼首席执行官李彦宏带队在北京拜访中国石油天然气集团有限公司（以下简称“中国石油”），并与中国石油集团董事长、党组书记戴厚良举行会谈。双方就强化合作，推动能源行业与数字化智能化深度融合进行了深入交流。中国石油将加快推进数字中中国石油建设，加强与百度集团合作，推动能源行业与数字化智能化的深度融合，为保障国家能源安全作出更大贡献。李彦宏表示，大模型展现出的“智能涌现”和理解、生成、逻辑、记忆等核心能力，为前沿科技与油气业务结合打开了更加广阔的想象空间。一直

deepseek网页版入口 deepseek官网入口 Feb 19, 2025 pm 04:54 PM

DeepSeek 是一款强大的智能搜索与分析工具，提供网页版和官网两种访问方式。网页版便捷高效，免安装即可使用；官网则提供全面产品信息、下载资源和支持服务。无论个人还是企业用户，都可以通过 DeepSeek 轻松获取和分析海量数据，提升工作效率、辅助决策和促进创新。

百度息壤贝壳获取方法介绍 Mar 28, 2024 am 09:11 AM

在息壤中有不少用户不知道贝壳在哪里，怎么才能获得，有些玩家转了几个小时候都没有找到，下面小编就带来了百度息壤贝壳的获取方法，快来一起看看吧。百度息壤贝壳怎么获得1、首先我们需要来到社区，然后来到下图的这个位置。2、在这里选择目的地，选择进入188层。3、进入到188层后，在周围转悠会有这个提示，点击我知道了就行。4、贝壳的位置可能会有些难找，就在188电梯的后面，有个发光的小点就是贝壳。5、捡贝壳需要用VR手柄才能捡，点击贝壳就可以了。兑换方式1、首先点击页面右上方的“设置”图标，在设置中选择“

消息称三星 Galaxy S24 系列手机国行版'即圈即搜”将支持谷歌搜索 Jun 01, 2024 am 09:54 AM

5月31日消息，据博主@i冰宇宙今日爆料，三星GalaxyS24系列手机国行版“即圈即搜”将支持谷歌搜索。具体上线时间，该博主并未透露。根据三星此前介绍，三星GalaxyS24系列实装了众多高阶AI能力，将输入、翻译、录音机、笔记、相机等实用功能AI化，为用户带来更方便、更高效的综合体验。与海外版不同的是，三星GalaxyS24系列的AI功能大多由国内厂商提供服务，例如百度等。此前报道，GalaxyAI深度集成百度文心大模型多项能力，可提供端侧赋能的通话、翻译功能，以及借助生成式AI带来的智能摘

百度文心大模型 4.0 Turbo 面向企业开放，相较于文心一言 4.0 通用版降价 70% Jul 11, 2024 pm 07:14 PM

本站7月5日消息，百度在6月28日的WAVESUMMIT深度学习开发者大会上发布了全新的文心大模型4.0Turbo版本。相较于文心大模型4.0版本，Turbo应答速度更快、检索能力更强。在今日的2024世界人工智能大会上，百度副总裁谢广军表示，文心一言4.0Turbo已正式面向企业全面开放，定价是输入0.03元/千Tokens，输出0.06元/千Tokens，“若按照3：1输入输出长短统计下，相较于文心一言4.0的通用版本降价幅度达70%。”百度表示，在强大的基础大模型基础上，文心大模型进一步创

See all articles

JS实现仿google、百度搜索框输入信息智能提示的实现方法_javascript技巧

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题