zoukankan      html  css  js  c++  java
  • 一个用于自动完成的服务器自定义控件

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

    控件效果图

    此控件的原理如下:使用ListItemCollection集合来保存列表项,展现到客户端时产生的代码如下:
    <input name="txtBClass" type="text" id="txtBClass" rows="8" matchanywhere="True" listallitemonfocus="True" style="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控件。感兴趣的朋友可以与我联系。

  • 相关阅读:
    回发或回调参数无效。 问题的解决和思考
    母板页中的引用的图片,JS,css等路径问题
    Solution: 题解 CF1196E Connected Component on a Chessboard
    01/05/2020 我注册了博客园 I enrolled in Cnblogs.
    Basic Thought / Data Structure: 前缀和 Prefix Sum
    Basic Thought / Data Structure: 差分 Difference
    DotNet中异步编程(APM)的研究1异步编程介绍
    关于atl server 的感受(3) 一个我自以为豪的应用
    自己的博客,竟然要自己搜出来,太久没来了。
    关于atl server 的感受(2)
  • 原文地址:https://www.cnblogs.com/faib/p/741455.html
Copyright © 2011-2022 走看看