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

1664

CakePHP 教程

1422

Laravel 教程

1316

PHP教程

1268

C# 教程

1241

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 系列手機國行版「即圈即搜」將支援Google搜尋 Jun 01, 2024 am 09:54 AM

5月31日消息，根據部落客@i冰宇宙今日爆料，三星GalaxyS24系列手機國行版「即圈即搜」將支援Google搜尋。具體上線時間，該部落客並未透露。根據三星先前介紹，三星GalaxyS24系列實裝了眾多高階AI能力，將輸入、翻譯、錄音機、筆記、相機等實用功能AI化，為使用者帶來更方便、更有效率的綜合體驗。與海外版不同的是，三星GalaxyS24系列的AI功能大多由國內廠商提供服務，例如百度等。先前報導，GalaxyAI深度整合百度文心大模型多項能力，可提供端側賦能的通話、翻譯功能，以及借助生成式AI帶來的智能摘

ai工具推薦 Nov 29, 2024 am 11:08 AM

本文介紹了六款受歡迎的 AI 工具，包括抖音豆包、文心一格、騰訊智影、百度飛槳 EasyDL、百度 AI Studio 和訊飛星火認知大模型。這些工具涵蓋不同的功能，如文字創作、圖像生成、影片編輯和 AI 模型開發。選擇合適的 AI 工具需要考慮功能需求、技術水平和成本預算等因素。這些工具為需要 AI 輔助的個人和企業提供了方便且有效率的解決方案。

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版

熱門話題