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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
javascript 自动转到命名锚记
Jan 10 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 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
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
获取URL文件名后缀
2013/10/24 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
基本DOM节点操作
2017/01/17 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
python实现多线程抓取知乎用户
2016/12/12 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
python lxml中etree的简单应用
2019/05/10 Python
Django Rest framework权限的详细用法
2019/07/25 Python
在python中做正态性检验示例
2019/12/09 Python
Python内置类型性能分析过程实例
2020/01/29 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
村捐赠仪式答谢词
2014/01/21 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
宣传标语大全
2014/07/01 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
婚庆司仪开场白
2015/05/29 职场文书
关于运动会的广播稿
2015/08/19 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python