suchen

Heim  >  Artikel  >  Web-Frontend  >  JS-Implementierungsmethode zur Nachahmung der Suchfeldeingabeinformationen von Google und Baidu, intelligente Eingabeaufforderungen_Javascript-Fähigkeiten

JS-Implementierungsmethode zur Nachahmung der Suchfeldeingabeinformationen von Google und Baidu, intelligente Eingabeaufforderungen_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 16:03:042294Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode von JS zur Implementierung intelligenter Eingabeaufforderungen für Eingabeinformationen, die die Suchfelder von Google und Baidu imitieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt: 

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

Serverseitiger C#-Code

<%@ 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;
 }
}

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Die vergessene Methode „slice()“ von javascript_javascript-TippsNächster Artikel：Die vergessene Methode „slice()“ von javascript_javascript-Tipps

In Verbindung stehende Artikel

Mehr sehen