利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）

实现功能描述：

1、实现搜索框的智能提示

2、第二次浏览器缓存结果

3、实现仿百度搜索

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="js/jquery-1.8.3.min.js"></script>

    <script src="jsPlugin/autocomplete/jquery.autocomplete.js"></script>

    <style>

        * { margin: 0px; padding: 0px; }

        #wrapper { height: 100%; padding-top: 100px; }

        .s-skin-container { position: fixed; _position: absolute; top: 0; left: 0; height: 100%; width: 100%; min-width: 1000px; z-index: -10; background-position: center 0; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; zoom: 1; }

        .s-form { width: 700px; height: 100%; min-height: 293px; margin: 0 auto 0 auto; text-align: left; z-index: 100; }

        form { margin: 8px 0 0 25px; }

        input { outline: none; }

        #s_kw_wrap { display: inline-block; zoom: 1; vertical-align: top; width: 500px; }

        #kw { width: 488px; padding: 10px 9px 10px 7px; border: 0; background-image: none; height: 20px; line-height: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

        .s_btn_wr { display: inline-block; zoom: 1; vertical-align: top; width: 102px; height: 38px; border: 1px solid #38f; border-bottom: 1px solid #2e7ae5; background-color: #38f; }

        .btn { cursor: pointer; width: 102px; height: 38px; line-height: 38px; padding: 0; border: 0; background: none; background-color: #38f; font-size: 16px; color: white; box-shadow: none; font-weight: normal; }

        .btn:hover { height: 39px; _height: 38px; background-color: #317ef3; border-bottom: 1px solid #2868c8; box-shadow: 1px 1px 1px #ccc; }

        /*选择提示项*/

        .autocomplete-suggestions { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ccc; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); }

        .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }

        .autocomplete-no-suggestion { padding: 2px 5px; }

        .autocomplete-selected { background: #F0F0F0; }

        .autocomplete-suggestions strong { font-weight: bold; color: #ff6a00; }

        .autocomplete-group { padding: 2px 5px; }

        .autocomplete-group strong { font-weight: bold; font-size: 16px; color: #000; display: block; border-bottom: 1px solid #000; }

    </style>

</head>

<body>

    <div id="wrapper">

        <div class="s-skin-container" style="background-image: url(https://ss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/5.jpg);"></div>

        <div class="s-form">

            <form action="#">

                <span id="s_kw_wrap">

                    <input type="text" id="kw" maxlength="100" autocomplete="off" />

                </span>

                <span class=" s_btn_wr">

                    <input type="submit" value="搜索一下" class="btn" />

                </span>

            </form>

        </div>

    </div>

    <script>

        $(function () {

            $("#kw").focus();

            $("#kw").autocomplete({

                ajaxSettings: { url: "/ajax/autoHandler.ashx" }

            })

        })

    </script>

</body>

</html>

后端代码

  /// <summary>

    ///  提供搜索数据

    /// </summary>

    public class autoHandler : IHttpHandler, IRequiresSessionState

    {

        public HttpRequest Request

        {

            get

            {

                return HttpContext.Current.Request;

            }

        }

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "application/json";

            string query = Request["query"];

            object data = null;

            if (!string.IsNullOrEmpty(query))

            {

                List<AutoKeyWordEntity> list = GetSearchList(query);

                data = list;

            }

            var newData = new { suggestions = data };

            string jsonData = JsonConvert.SerializeObject(newData);

            context.Response.Write(jsonData);

        }

        private List<AutoKeyWordEntity> GetSearchList(string query)

        {

            List<AutoKeyWordEntity> list = new List<AutoKeyWordEntity>();

            if (query.Contains("百") || query.Contains("b"))

            {

                list.Add(new AutoKeyWordEntity() { value = "百度" });

                list.Add(new AutoKeyWordEntity() { value = "b百度" });

            }

            else if (query.Contains("360") || query.Contains("3") || query.Contains("6"))

            {

                list.Add(new AutoKeyWordEntity() { value = "360" });

                list.Add(new AutoKeyWordEntity() { value = "3" });

                list.Add(new AutoKeyWordEntity() { value = "360搜索" });

            }

            else if (query.Contains("神"))

            {

                list.Add(new AutoKeyWordEntity() { value = "神马搜索" });

            }

            else if (query.Contains("1"))

            {

                list.Add(new AutoKeyWordEntity() { value = "1一个人" });

            }

            else

            {

                list.Add(new AutoKeyWordEntity() { value = "我的网" });

            }

            return list;

        }

        public class AutoKeyWordEntity

        {

            public string value { get; set; }

        }

        public bool IsReusable

        {

            get { return true; }

        }

    }

　　效果：

下载地址 http://www.jq22.com/jquery-info12967

利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）的更多相关文章

仿百度搜索（AJAX）
<h1>百度搜索</h1><div id="sousuo"> < ...
点滴积累【JS】---JS实现仿百度模糊搜索效果
效果: HTML代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="In ...
百度搜索效果（jsonp法）
百度搜索效果(jsonp法): 不需要放在服务器中,本地就可以执行 <!DOCTYPE html> <html> <head> <meta charset=& ...
vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...
Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图前端初始页面输入搜索信息页面点击查询结果页面环境介绍前端:vue 后端:springboot jdk:1.8及以上数据库:mysql 核心代码介绍 TypeCtrler .j ...
js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用
做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...
使用Jquery UI 高仿百度搜索下拉列表功能
最近项目有个需求,在新添加商户的时候,用户输入商户名称后,如果系统中有类似的商户名称,直接显示出来,如下图的效果: 实现这个功能,直接使用了JQuery UI 插件目前我使用的实现版本是: 网友可以 ...
利用tween.js算法生成缓动效果
在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...
利用referer属性，记录百度搜索跳转参数
从百度搜索结果跳转到指定链接前,百度会发送一些参数,可以利用referer属性,在本站访问时记录百度跳转来之前的一些参数. 利用百度跳转前参数,进行一些相关的seo优化. 目前所用到的一些参数说明如下 ...

随机推荐

TRIE 字典树前缀紧急集合！
TRIE: 在计算机科学中,Trie,又称前缀树或字典树,是一种有序树状的数据结构,用于保存关联数组,其中的键通常是字符串.——百度百科自我理解: trie树,是一种处理字符串前缀的数据结构,通常会 ...
洛谷P3952 时间复杂度
大毒瘤...... 时隔快半年我终于花了两个小时堪堪A掉这一题...果然我还没有准备好. 想法:用DFS模拟递归. 时间复杂度的处理:每层循环取max,然后相加. 最大难点:各种繁杂而令人发指的特判. ...
【POJ1741】Tree
题目大意:给定一棵 N 个节点的无根树,边有边权,统计树上边权和不大于 K 的路径数. 对于每条树上路径,对于每一个点来说,该路径只有经过该点和不经过该点两种情况,对于不经过该点的情况,可以转化成是否 ...
由asp的一个错误，看语言的不同：asp & java
今天查看网页源代码,无意发现源代码尾部抛出asp的错误信息,但没有显示在网页上. 如果没查看源代码,还没发现asp运行代码出错了. 大致情况是这样,在asp中,有一个变量来表示用户当前使用的容量,注意 ...
Myeclipse 2017 安装与破解
前言:今天的 Myeclipse 2017 不能用了. 直接找一个教程,破解了,教程的地址如下: http://blog.csdn.net/qingjianduoyun/article/details ...
【maven】依赖、继承、聚合
依赖: <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId&g ...
浅谈js的数字格式
除了正常我们常用的十进制(如5,8,12.123等),js还可以直接表示2.8.16进制 1.二进制二进制是以0b开头 0b10; 2.八进制八进制是以0开头 010: 3.十六进制十六进制是以 ...
C#修饰符详解
不定期更新,2017.8.9 一.new 别看new这个修饰符经常用,恐怕很多人都不知道其本质.我们先来看看new修饰符的官方定义: new 仅允许在嵌套类声明中使用,表明类中隐藏了由基类中继承而来的 ...
Linux命令之mkdir
mkdir命令用处:创建文件夹用法:在终端中输入mkdir加上文件夹的名字示例: (我想创建一个名字为shuyunquan的文件夹)
在eclipse中启动项目报java.util.concurrent.ExecutionException: java.lang.OutOfMemoryError: PermGen space
在我们启动项目的时候经常会出现内存溢出这个错误设置一下内存就ok 错误信息 java.util.concurrent.ExecutionException: java.lang.OutOfMemo ...

利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）

利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）的更多相关文章

随机推荐

热门专题