利用Coolite控件打造 简单的动态搜索功能。

利用Coolite控件打造　简单的动态搜索功能。功能效果图如上图。

功能说明：　1、

 1<ext:Store runat="server"
 2            ID="Store1"  AutoLoad="false"
 3            RemoteSort="true"
 4            OnRefreshData="Store1_RefershData"
 5            >
 6            <Proxy>
 7                <ext:DataSourceProxy></ext:DataSourceProxy>
 8            </Proxy>
 9            <Reader>
10           
11                <ext:JsonReader TotalProperty="RecordCount"  ReaderID="ID">
12                    <Fields>
13                        <ext:RecordField Name="ID" />
14                        <ext:RecordField Name="EmpName" /> 
15                        <ext:RecordField Name="GroupID" /> 
16                          <ext:RecordField Name="DepartInfo" /> 
17                    </Fields>
18                </ext:JsonReader>
19               
20            </Reader>
21            <AutoLoadParams>
22                <ext:Parameter Name="start" Value="0" Mode="Raw" />
23                <ext:Parameter Name="limit" Value="15" Mode="Raw" />
24            </AutoLoadParams>
25        </ext:Store>

数据源显示如上图，需要注意的　AutoLoad="false"　一定要设成false ，如果是动态读取指定字段数据时，一定要设成false。

2、Combox

<ext:ComboBox 
                ID="ComboBox1"
                runat="server" 
                StoreID="Store1"
                DisplayField="EmpName" 
                ValueField="ID"
                TypeAhead="false"
                LoadingText="Searching" 
                Width="570"
                PageSize="10"
                 EmptyText="请输入搜索条件"
                HideTrigger="true"
                ItemSelector="div.search-item"        
                MinChars="1">
                <Template ID="Template1" runat="server">
                   <tpl for=".">
                      <div class="search-item">
                         <h3><span>{DepartInfo}</span><span>{GroupID}</span>{EmpName}</h3>
                      </div>
                   </tpl>
                </Template>
                          </ext:ComboBox>

3、后台数据源绑定

1 protected void Store1_RefershData(object sender ,StoreRefreshDataEventArgs e)
2    {
3        string emName=!string.IsNullOrEmpty(e.Parameters["query"])?e.Parameters["query"].ToString().Trim():"";//前台页手工录入的关键字
4        DataSet ds = "";//这里放由Sql句返回的数据集
5        Store1.DataSource = ds;
6        this.Store1.DataBind();     
7    }

看了别人写的看代码，总感到他少写了些什么。自己写出来也只有短短的几行代码。