一个用于自动完成的服务器自定义控件

经过几天的努力，今天终于完成了自动完成控件的编写，所以迫不及待的拿来与大家分享。

控件效果图

此控件的原理如下：使用ListItemCollection集合来保存列表项，展现到客户端时产生的代码如下：

<input name="txtBClass" type="text" id="txtBClass" rows="8" matchanywhere="True" listallitemonfocus="True" style="width:120px;" />
<?XML:NAMESPACE PREFIX="fsc" />
<fsc:AutoCompleteTextBox id="txtBClass_items">
    <fsc:ListItem value="01" text="黑色金属" />
    <fsc:ListItem value="02" text="有色金属" />
    <fsc:ListItem value="03" text="竹木及制品" />
    <fsc:ListItem value="04" text="水泥及水泥制品（不含商品混凝土）" />
    <fsc:ListItem value="05" text="砖、瓦、灰、砂、石、土" />
    <fsc:ListItem value="06" text="陶瓷及其制品" />
    <fsc:ListItem value="07" text="玻璃及其制品" />
    <fsc:ListItem value="08" text="装饰石材" />
</fsc:AutoCompleteTextBox>

在控件获得焦点时定义一个定时器，根据输入的字符进行实时筛选并添加到一个浮动的层里面，供选择。也可以使用光标键进行移动选择，按回车确定选择。选择后会激活控件的客户端事件onchanged，在onchanged里面可以进行下一步的操作，如使用Ajax进行二级分类的填充。如果开启AutoPostBack属性，则会激活服务器端事件OnChanged。

 

 

        <script>
        document.getElementById("txtBClass").onchanged = function ()
        {
            var txtBClass = document.getElementById("txtBClass");//分类1
            var txtSClass = document.getElementById("txtSClass");//分类2
            txtSClass.items.clear();
            txtSClass.value = "";
            if(txtBClass.selectedItem != null)
            {
                //Shop.WebManage.Product.GetSClassList 使用Ajax.Net 返回二级列表
                var tb = Shop.WebManage.Product.GetSClassList(txtBClass.selectedItem.value).value.Tables[0];
                for(var i = 0; i < tb.Rows.length; i++)
                {
                    txtSClass.items.add(tb.Rows[i].text, tb.Rows[i].value);
                }
                txtSClass.saveState();//保存到服务器列表中
            }
        }
        </script>

控件客户端属性selectedItem返回当前选中的项，服务器端对应的是SelectedItem属性。
其他属性：
Rows: 设置列表显示的项数。
SendKeyTab: 设置是否在按下回车键选择的同时将光标移到下一控件。
ListAllItemOnFocus: 是否在获得光标的时候显示列表以供选择。否则只有输入字符后才筛选显示。
MatchAnywhere: 是否匹配任意位置的字符。否则从左匹配。

此控件已收录到FaibClass.WebControls.dll里面，此次还改进了PagingPanel、CalendarBox控件。感兴趣的朋友可以与我联系。