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

百曉生nyj 2020-04-16

展開全文

在Web應(yīng)用開發(fā)中經(jīng)常碰到這樣的情況，Dropdownlist綁定的數(shù)據(jù)太多，用戶要選擇某一項必須從頭找到尾，使用起來很不方便。最近我在工作中就碰到這種情況，公司內(nèi)某個業(yè)務(wù)系統(tǒng)需要綁定幾百條的廠家信息，用戶強(qiáng)烈要求帶搜索功能。其實要實現(xiàn)這個功能本身并不難，實現(xiàn)方式也可以有多種，就看哪種方式更優(yōu)雅了。最簡單的方法莫過于在下拉框旁邊弄個文本框，再加個按鈕啥的，讓用戶輸入選項名稱，點擊搜索就OK了。但這樣的界面也太寒酸了，用戶體驗不好。最好能有個類似Winform里的Combobox那樣的控件，既支持下拉，也可以手動輸入。但遺憾的是，asp.net自帶的服務(wù)器控件沒有帶這種功能的，HTML控件也沒有。咋辦呢？其實，Web程序應(yīng)用了這么多年，肯定有很多開發(fā)人員碰到這樣的需求，解決方案也不是沒有。比如，熟悉MS工具的朋友就知道，ASP.Net AJAX Control Tookit里面就有個ComboBox控件，可以實現(xiàn)下拉框搜索功能。但是，在使用中文的時候有點小麻煩，輸入中文搜索時必須頻繁切換輸入法，用起來挺尷尬的。
其實，還有個比較有名的js界面框架：jQueryEasyUI。這套框架是基于jQuery的，有豐富的界面控件，其中就有個combobox。經(jīng)過使用發(fā)現(xiàn)，它對中文的支持很不錯！不過，這些都是HTML控件，想讓它跟asp.net服務(wù)器控件結(jié)合還需要做點工作。直接給出步驟吧：

1.在aspx頁面內(nèi)引入相關(guān)的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腳本，讓下拉框擁有搜索功能。

           //相當(dāng)于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>標(biāo)簽的onchange事件，asp.net服務(wù)器控件dropdownlist默認(rèn)的SelectedIndexChanged事件也不會觸發(fā)了。既然不會觸發(fā)，當(dāng)然也不會Postback了。那要與服務(wù)器交互怎么辦？easyui為我們加了這個：onChange：function(oldValue,newValue)。這個function就是下拉框索引改變時調(diào)用的函數(shù)。這里又要注意了，由于下拉框支持手動輸入文字并自動搜索，只要文字改變就會觸發(fā)這個事件然后調(diào)用那個function，newValue就是改變后的值。這就給回發(fā)帶來了一點麻煩：我們并不需要文字一改變就回發(fā)，而是匹配選項才回發(fā)，這就有了代碼里的for循環(huán)判斷。__doPostBack這個函數(shù)大家應(yīng)該不陌生了，asp.net服務(wù)器控件向服務(wù)器回發(fā)用的就是這個函數(shù)。這樣，就實現(xiàn)了帶搜索功能的下拉框。寫到這里，大家可能覺得大功告成了。沒錯，一般情況下，這樣就可以使用了。不過，還是有點小問題：當(dāng)你把這個控件放到UpdatePanel里時，每次一回發(fā)，dropdownlist的樣式都沒了，回到了默認(rèn)的下拉框狀態(tài)。這是為什么呢？我覺得是因為UpdatePanel局部刷新，并沒有將整個頁面重新載入，第三步里js代碼就沒有執(zhí)行，所以看不到效果了。解決這個問題有個辦法，就是在后臺事件處理方法中動態(tài)插入javascript代碼，將以上javascript代碼執(zhí)行一遍就行啦。

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

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