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


Posted in Javascript onApril 20, 2015

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

Javascript 相关文章推荐
javascript 面向对象编程 function也是类
Sep 17 Javascript
jquery select下拉框操作的一些说明
Apr 02 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
Jquery遍历Json数据的方法
Apr 20 #Javascript
javascript判断变量是否有值的方法
Apr 20 #Javascript
javascript实现校验文件上传控件实例
Apr 20 #Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 #Javascript
javascript实现汉字转拼音代码分享
Apr 20 #Javascript
jQuery简单实现图片预加载
Apr 20 #Javascript
jquery滚动到顶部底部代码
Apr 20 #Javascript
You might like
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
php根据年月获取季度的方法
2014/03/31 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
JavaScript 基础问答三
2008/12/03 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
Python简单计算文件夹大小的方法
2015/07/14 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
Python实现KNN邻近算法
2021/01/28 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
研究生求职推荐信范文
2013/11/30 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
小学生优秀评语大全
2014/04/22 职场文书
初中优秀学生评语
2014/12/29 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
小学元宵节活动总结
2015/02/06 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
SQL Server Agent 服务无法启动
2022/04/20 SQL Server