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

前端技术 2023/09/04 JavaScript

本文实例讲述了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?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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/11658

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案