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 相关文章推荐
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 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
用ODBC的分页显示
2006/10/09 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
js日期对象兼容性的处理方法
2014/01/28 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
容易被忽略的Python内置类型
2020/09/03 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
英国最大的海报商店:GB Posters
2018/03/20 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
什么是servlet
2012/05/08 面试题
进修护士自我鉴定
2013/10/14 职场文书
自我鉴定范文
2013/11/10 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
护士的自我鉴定
2014/02/07 职场文书
2014庆六一活动方案
2014/03/02 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python