zoukankan      html  css  js  c++  java
  • 利用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%;  100%; min- 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 {  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;  500px; }
            #kw {  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;  102px; height: 38px; border: 1px solid #38f; border-bottom: 1px solid #2e7ae5; background-color: #38f; }
            .btn { cursor: pointer;  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

  • 相关阅读:
    Opennebula4.2管理端和节点SSH模式的安装配置
    shell操作mysql之增删改查
    Linux常用服务部署与优化之NFS篇
    Linux常用服务部署与优化之Samba篇
    sql编程小结
    mysql5.7.11编译安装以及修改root密码小结
    基于centOS6.7搭建LAMP(httpd-2.4.18+mysql-5.5.47+php-5.6.16)环境
    php实现文件上传下载功能小结
    zabbix搭建
    mysql主从复制
  • 原文地址:https://www.cnblogs.com/LoveTX/p/7743288.html
Copyright © 2011-2022 走看看