asp.net可搜索下拉框，支持中文

在Web应用开发中经常碰到这样的情况，Dropdownlist绑定的数据太多，用户要选择某一项必须从头找到尾，使用起来很不方便。最近我在工作中就碰到这种情况，公司内某个业务系统需要绑定几百条的厂家信息，用户强烈要求带搜索功能。其实要实现这个功能本身并不难，实现方式也可以有多种，就看哪种方式更优雅了。最简单的方法莫过于在下拉框旁边弄个文本框，再加个按钮啥的，让用户输入选项名称，点击搜索就OK了。但这样的界面也太寒酸了，用户体验不好。最好能有个类似Winform里的Combobox那样的控件，既支持下拉，也可以手动输入。但遗憾的是，asp.net自带的服务器控件没有带这种功能的，HTML控件也没有。咋办呢？其实，Web程序应用了这么多年，肯定有很多开发人员碰到这样的需求，解决方案也不是没有。比如，熟悉MS工具的朋友就知道，ASP.Net AJAX Control Tookit里面就有个ComboBox控件，可以实现下拉框搜索功能。但是，在使用中文的时候有点小麻烦，输入中文搜索时必须频繁切换输入法，用起来挺尴尬的。
其实，还有个比较有名的js界面框架：jQueryEasyUI。这套框架是基于jQuery的，有丰富的界面控件，其中就有个combobox。经过使用发现，它对中文的支持很不错！不过，这些都是HTML控件，想让它跟asp.net服务器控件结合还需要做点工作。直接给出步骤吧：

1.在aspx页面内引入相关的js文件和CSS文件。文件具体路径可能有所不同，但要注意js文件引用的先后顺序。

<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<link href="../Styles/easyui.css" rel="stylesheet" type="text/css" />
<link href="../Styles/icon.css" rel="stylesheet" type="text/css" />

2.为Dropdownlist控件加CSS类easyui-combobox。

<asp:DropDownList ID="ddlManufacturer" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlManufacturer_SelectedIndexChanged"
class="easyui-combobox" Width="150px" Height="22px">
</asp:DropDownList>

3.加入js脚本，让下拉框拥有搜索功能。

           //相当于select的onchange事件            $('#<%= ddlManufacturer.ClientID%>').combobox({                onChange: function (newValue, oldValue) {                    var count = $("#<%= ddlManufacturer.ClientID%> option").length;                    var ddlFac = document.getElementById("<%= ddlManufacturer.ClientID%>");                    for (var i = 0; i < count; i++) {                        if (ddlFac.options[i].value == newValue) {                            __doPostBack('<%= ddlManufacturer.ClientID%>', '');                            break;                        }                    }                }            });

这个很重要，有这些脚本才能让下拉框有搜索功能。特别注意javascript代码中的onChange，easyui框架屏蔽了客户端HTML <select>标签的onchange事件，asp.net服务器控件dropdownlist默认的SelectedIndexChanged事件也不会触发了。既然不会触发，当然也不会Postback了。那要与服务器交互怎么办？easyui为我们加了这个：onChange：function(oldValue,newValue)。这个function就是下拉框索引改变时调用的函数。这里又要注意了，由于下拉框支持手动输入文字并自动搜索，只要文字改变就会触发这个事件然后调用那个function，newValue就是改变后的值。这就给回发带来了一点麻烦：我们并不需要文字一改变就回发，而是匹配选项才回发，这就有了代码里的for循环判断。__doPostBack这个函数大家应该不陌生了，asp.net服务器控件向服务器回发用的就是这个函数。这样，就实现了带搜索功能的下拉框。写到这里，大家可能觉得大功告成了。没错，一般情况下，这样就可以使用了。不过，还是有点小问题：当你把这个控件放到UpdatePanel里时，每次一回发，dropdownlist的样式都没了，回到了默认的下拉框状态。这是为什么呢？我觉得是因为UpdatePanel局部刷新，并没有将整个页面重新载入，第三步里js代码就没有执行，所以看不到效果了。解决这个问题有个办法，就是在后台事件处理方法中动态插入javascript代码，将以上javascript代码执行一遍就行啦。

ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "refreshEasyui",
scripts+ " if(window.reRegisterJS != undefined){reRegisterJS();}", true);

scripts就是第三步里的javascript代码。
至此，真的可以告一段落了。大家也可以把它做成用户控件，方便以后重用。有不合理的地方，欢迎大家和我交流！

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。