关于jquery.autocomplete的一点心得

最新推荐文章于 2017-08-01 22:59:35 发布

原创最新推荐文章于 2017-08-01 22:59:35 发布 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#search #function #xml #ajax #string #blog

Jquery自动完成同时被 2 个专栏收录

1 篇文章

订阅专栏

1 篇文章

订阅专栏

本文介绍了一种使用Ajax和jQuery插件实现博客搜索框自动补全的方法。通过客户端JavaScript与服务器端交互，实现了根据输入关键词实时显示匹配的博客名称列表。服务端采用一般处理程序接收请求并返回匹配结果。

<!--自动完成开始-->
    <script type="text/javascript">
        jq(document).ready(function () {
            function formatItem(row, i, max) {
                return i + '\n:"' + row[0] + '"';
            }
            function formatResult(row) {
                return row[0].replace(/(<.+?>)/gi, '');
            }
            jq("#blog-search-input").autocomplete("http://localhost:8770/ashx/Iu_Search_blog.ashx",
         {
             minChars: 0,
             delay: 10,
             matchSubset: 1,
             matchContains: true,
             cacheLength: 10,
             max: 10,
             formatItem: formatItem,
             formatResult: formatResult,
             width: 328,
             autoFill: false,
             scrollHeight: true
         }
        );
        });
    </script>

以上是使用插件必要的一段代码，其实也不是很多，很简单的。利用ajax把文本框中的关键字post到服务器（这里我用的一般处理程序，你也可以换成aspx的，在page_load中写代码）

下面是服务端代码：

/// <summary>
    /// Iu_Search_blog 的摘要说明
    /// </summary>
    public class Iu_Search_blog : IHttpHandler
    {
                                                                                                                                                                 
        public void ProcessRequest(HttpContext context)
        {
            string key = context.Server.UrlDecode(context.Request.QueryString["q"]);
            SearchRule rule = new SearchRule();
            DataTable dt = rule.SearchRuleAuto(key);
            string xml = "";
            foreach (DataRow row in dt.Rows)//循环读取值，并且以XML格式输出
            {
                xml += "" + row["user_blogname"] + "|" + "\n";
            }
            context.Response.ContentEncoding = System.Text.Encoding.UTF8;
            context.Response.Write(xml);
        }
                                                                                                                                                                 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

服务端的代码也比较简单，只要Request接收客户端ajax传过来的数据就行（这里需要注意的是context.Request.QueryString["q"]，必须是“q”，因为源码中已经设定了，如果你不喜欢，可以去修改源码）好了，接下来就是用sql语句根据接收的参数来查询数据了，返回一个DataTable 再遍历每行输出到流就OK了。希望对路过的朋友有所帮助：）有疑问可以留言我：woshi1989128@foxmail.com