利用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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据分析

C# 调用PowerShell方法

PowerShell应为编写和运行都很方便,所以为了重复利用,经常写了一些小方法或者PS代码片段。使用的时候可能会很难找到自己想要的那个方法,如果要是有一个界面...

2754
来自专栏Java学习123

JAVA调用Shell脚本

2604
来自专栏xingoo, 一个梦想做发明家的程序员

Elasticsearch使用REST API实现全文检索

通过rest api添加检索数据,阅读官方文档可以发现,elasticsearch支持动态映射,但是其中有不少问题,且听慢慢详解。 本文主要讲述三点内容: ...

1877
来自专栏王磊的博客

ASP.NET页面的字符编码设置

在用ASP.NET写网上支付的接口程序时,遇到一个奇怪问题,通过表单提交过去的中文全是乱码,英文正常。而用asp程序进行测试,可以正常提交中文,asp页面中有这...

3316
来自专栏前端架构

java项目动态配置常量和peiconfig.properties配置使用详解

 Java工程中配置信息一般都写在.properties文件中,下面这篇文章是对java基础配置的一点学习心得整理后汇总分享,以便脑袋短路时查阅。

522
来自专栏大内老A

利用EntLib授权机制实现对ASP.NET页面的自动授权

ASP.NET默认采用UrlAuthorizationModule和FileAuthorizationModule分别实现针对请求地址和物理文件的授权,但是在很...

1909
来自专栏程序小工

【TP5深入理解】控制器(三)--前置操作

tp5 框架的前置操作可以用于对某些方法进行通用的预处理,比如登录状态的判断[session 处理]、用户权限的卡控[cache/session 的处理],通过...

872
来自专栏抠抠空间

Flask之flask-session

983
来自专栏何俊林

原来Android还可以这样通过反射,获取jar包属性及方法

1、写一个java类,生成Jar包 2、初始Jar的转换 3、创建一个android工程 4、复制Jar包 5、反射获取属性和方法 5、完整Demo 6、补充 ...

1905
来自专栏hbbliyong

完美卸载SQL Server 2008的方案

针对SQL数据库卸载不完全的现象,做了如下总结: 1,控制面板 卸载 首先,打开控制面板,按照“安装时间”进行排序,卸载SQL Server系列组件 ...

3387

扫描关注云+社区