文档章节

仿google、百度搜索框输入信息智能提示的实现 兼容主流浏览器

深圳大道
 深圳大道
发布于 2016/12/29 15:32
字数 615
阅读 1
收藏 0
<!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>

<%@ 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;
    }

}

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/8264779

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
百度地图BMap API的应用实例

前几天,帮朋友做了几款地图API接口调研,推荐他使用百度BMap和谷歌GMap API,后来又直接交由我来替他做 一来上周帮研究生部老师做的学位证书精准打印系统基本完工,晚上有点时间研究下js 二...

长平狐
2013/01/06
21.9K
2
G Suite用户现可在Chrome地址栏中快速搜索Drive文件

现在用户在使用大部分主流浏览器(例如谷歌Chrome)的时候,在地址栏内输入关键词都能进行快速搜索,而不需要在特定的搜索框中输入。而现在谷歌希望延伸这项功能,从而方便用户快速搜索Googl...

稿源:
03/21
0
0
JavaScript学习笔记(二)——从简单开始学起

学习新知识,探究新方法,是一个由"知器"——》"格物"——》"明理"——》"成道"依次演变的进化过程,需要循序渐进、由浅入深, 不过最终是否可以修炼成道骨仙风的"佛"家境界,则全凭个人的恒...

长平狐
2013/01/06
122
0
如何实现仿百度的拼音搜索提示

在百度的搜索框里,输入拼音,会得到搜索提示。比如输入tianq,在提示框里有“天气,天气预报查询”等提示内容。现在打算做一个这样效果的搜索。本来想用lucene实现:把要搜索的所有汉字串转...

containsoft
2011/10/19
3.2K
6
Lucene 相关词搜索

各位大神,来看看Lucene!本人想实现类似于百度或Google那样的,在搜索栏一输入关键词就会有相关关键词出现,这个功能如果简单一点HTML标签就已经自带,但是他只会记录当前浏览器的输入信息;...

learn_more
2015/04/30
269
8

没有更多内容

加载失败,请刷新页面

加载更多

debian10使用putty配置交换机console口

前言:Linux的推广普及,需要配合解决实际应用方能有成效! 最近强迫自己用linux进行实际工作,过程很痛苦,还好通过网络一一解决,感谢各位无私网友博客的帮助! 系统:debian10 桌面:xfc...

W_Lu
31分钟前
9
0
aelf Enterprise 0.8.0 beta有奖公测,“Bug奖金计划”重磅开启

2019年9月30日,aelf Enterprise 0.8.0 beta版正式发布。aelf Enterprise 0.8.0 beta是一个完备的区块链系统, 包含完备的区块链系统、开发套件、开发文档、以及配套的基础应用和基础服务。 ...

AELF开发者社区
33分钟前
7
0
oracle 初始化数据库脚本

create user lpf identified by 123456; create tablespace lpf_ts_cms datafile '/opt/app/oracle/product/11.2.0/lpf.dbf' size 200M; alter user lpf default tablespace lpf_ts_cms; sel......

internetafei
37分钟前
5
0
《区块链DAPP开发入门、代码实现、场景应用》笔记1——天外飞仙DAPP

Solidity编程语言解决了编写智能合约的不友好的问题,但是当合约编译并部署之后,对与这些接口的访问,对于一般的使用者来说,门槛有点高, 对普通用户来说也是非常不友好,为了使广大用户理...

柯南和由美
42分钟前
4
0
流程图制作软件推荐_流程图制作软件哪个好

流程图(Flow Chart)是一种表示算法思路的图示,通过特定图形、图表可以直观的说明某一过程。这种过程既可以是生产线上的工艺流程图,也可以标明某项任务必需的管理过程。为了便于识别,绘制...

工具分享
44分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部