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

2019-11-20 12:37:50

字体：大中小

来源：转载

供稿：网友

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

上一篇：jQuery提示插件alertify使用指南

下一篇：Jquery遍历Json数据的方法