封装一个自动检索框，原型是autocomplete

1.需要几个库文件

jquery库，jquery-ui库，jquery-ui-1.10.3.custom.min.css样式表库（当然部分效果img就略了，可自行到官网下载）

2.我们看看原型效果代码：

<cc1:CCStyle ID="CCStyle2" runat="server" Href="ui-lightness/jquery-ui-1.10.3.custom.min.css" />  

<input runat="server" type="text" class="input" id="txtparent" /><span style=" color:#666; font-style:italic;">自动搜索...</span>

<script src="../../js/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="../../js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            var t = '<%=InitializeControl() %>';
            var availableTags = t.split(',');
            $("#txtparent").autocomplete({
                source: availableTags
            });
        });
.....

说明下，<cc1:CCStyle是我写一个自定义控件，用来装载对应的css文件，和这个无关的，你可以把样式表拖进来一样。

 InitializeControl()是后台的一个方法，用来获取字符串，然后用split进行分割成字符数组，这样就能用jquer的ui库给的autocomplete方法进行对象绑定了。效果图如下：

页面渲染之后的关键html截图如下：

3.我们来进行进一步处理，把它装订成用户控件（当然了，也可以做成自定义控件）

新建一个用户控件，比较叫SearchBox.ascx，填入下面代码：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SearchBox.ascx.cs" Inherits="control_SearchBox" %>
<%@ Register Assembly="CCControl" Namespace="CCControl" TagPrefix="cc1" %>
<cc1:CCScript ID="CCScript2" runat="server" Src="jquery-1.7.2.min.js"></cc1:CCScript>
<cc1:CCScript ID="CCScript1" runat="server" Src="jquery-ui-1.10.3.custom.min.js"></cc1:CCScript>
<cc1:CCStyle ID="CCStyle1" runat="server" Href="ui-lightness/jquery-ui-1.10.3.custom.min.css"></cc1:CCStyle>
<Style type="text/css">
    .ui-menu-item{ font-size:12px;}
    .serach-box-sty-cus{line-height: 22px;height: 22px;border: 1px groove #CCC; 
    font-size: 14px;margin-top: 0px;font-family:Arial, 宋体; color:#e89830; font-weight:bold;}
</Style>
<asp:TextBox runat="server" CssClass="serach-box-sty-cus" ID="txtsearchbox" /><span style=" color:#666; font-size:12px; font-style:italic;">自动搜索...</span>
<input runat="server" type="hidden" id="hidsearchbox" />
<script type="text/javascript">
    $(function() {
        var t = '<%=InitializeControl() %>';
        var availableTags = t.split(',');
        $("#<%=txtsearchbox.ClientID%>").autocomplete({
            source: availableTags
        });

    });
</script>

后台代码：

protected void Page_Load(object sender, EventArgs e) { }

    private string _dataSetCacheName;
    /// <summary>
    /// 数据缓存名
    /// </summary>
    public string DataSetCacheName
    {
        get { return Test_BUL.sysParam.Cache_SearchBoxPrefix + _dataSetCacheName; }
        set { _dataSetCacheName = value; }
    }
    private string _strsql;
    /// <summary>
    /// 获取数据源执行的sql语句
    /// </summary>
    public string StrSql
    {
        get { return _strsql; }
        set { _strsql = value; }
    }

    /// <summary>
    /// 获取搜索框的值
    /// </summary>
    public string SearchBoxVlue
    {
        get { return this.txtsearchbox.Text.Trim(); }
    }

    /// <summary>
    /// 初始化autocomplete数据源
    /// </summary>
    protected string InitializeControl()
    {
        DataSet _ds;
        if (Tools.CacheUtil.IsExist(DataSetCacheName)) //Test_BUL.sysParam.CacheParamSearch
        {
            _ds = (DataSet)Tools.CacheUtil.GetCache(DataSetCacheName);
            return GetAutoCompleteArray(_ds);
        }
        else
        {
            using (_ds = Test_BUL.sys_Common.Instance.GetList(StrSql))
            {
                Tools.CacheUtil.InsertCach(DataSetCacheName, (object)_ds, 10, 6); //Test_BUL.sysParam.CacheParamSearch
                return GetAutoCompleteArray(_ds);
            }
        }
    }
    /// <summary>
    /// 获取autocomplete数据源
    /// </summary>
    /// <param name="ds">目标数据集</param>
    private string GetAutoCompleteArray(DataSet ds)
    {
        if (Tools.Validator.CheckDataSet(ds, 0))
        {
            System.Text.StringBuilder strb = new System.Text.StringBuilder("");
            int _count = ds.Tables[0].Rows.Count;
            for (int i = 0; i < _count; i++)
            {
                strb.Append(Tools.Validator.GetFieldValue(ds, i, "name"));
                strb.Append("|");
                strb.Append(Tools.Validator.GetFieldValue(ds, i, "id"));
                strb.Append(i < _count - 1 ? "," : "");
            }
            return strb.ToString();
        }
        else
            return "";
    }

为了效率起见，将数据缓存了下（缓存类就没贴了，所有缓存的对应键值放到单独的一个类里面方便维护），由于这个搜索框可能会被多处使用，所以缓存对象数据可能会有很多。

当然了，这里的数据源是取库中的ds，我们可以通过读取xml配置文件来处理，原理是一样的，就不多说了。

4.调用方法：

新建了一个text页面，放小段代码

头部引用
<%@ Register Src="~/control/SearchBox.ascx" TagPrefix="Ctl" TagName="SearchBox" %>
测试代码
<input runat="server" id="Text1" class="int" title="type "input"" />
    <Ctl:SearchBox runat="server" ID="shbox" />
    <asp:Button runat="server" ID="btnSend" Text="提交" OnClick="btnSend_Click" />

后台代码

protected void Page_Load(object sender, EventArgs e)
    {
        SetSearchBox();
    }

    protected void btnSend_Click(object sender, EventArgs e)
    {
        this.autocomplete.Value = this.shbox.SearchBoxVlue;
    }

    /// <summary>
    /// 设置搜索框
    /// </summary>
    private void SetSearchBox()
    {
        this.shbox.StrSql = "select .. fron .. where ...";
        this.shbox.DataSetCacheName = "tablename_pagename";
    }

效果就出来了，和上面一样。

ps：对于少量数据建议通过xml配置来实现，不会浪费资源。当然非得从库中取数据那也木的办法，乃们懂的。

如有不懂的可加QQ群：14670545