同时，选定一个选项之后，需要触发事件与后台交互，将该用户所在的部门显示到页面右边的ListBox控件中。
一、Dojo的FilteringSelect组件实现拼音检索功能
在网上有不少相关的介绍，其中比较经典的有"海盗乱语"的关于重写Dojo的FilteringSelect组件实现拼音检索功能的介绍（地址?p=38、?p=52）。由于作者的Demo后台以及pinyin4j的jar包都是基于Java平台的，本人花了一点时间将其实现在.Net平台下，并成功的实现了FilteringSelect选中事件的注册。实现原理请详细参考"海盗乱语"博客中的分析，这里对.Net平台下的实现思路做简要说明，并贴出源码供大家参考（在此对作者提供的思路表示感谢！）：
首先，引入Dojo工具包，在dojo目录下添加一个"test"文件夹，新建一个FilteringSelect.js文件，如下图：
FilteringSelect.js文件的作用是重写FilteringSelect组件，"海盗乱语"的博文中给出了的代码清单，为方便起见转贴如下：
复制代码 代码如下:
define([
"dojo/_base/declare", // declare,
"dojo/dom-attr", // domAttr.get
"dijit/form/FilteringSelect"
], function(declare, domAttr ,FilteringSelect){
return declare("test.FilteringSelect", [FilteringSelect], {
displayValueAttr:null, //新增一个自定义属性，用于指定FilteringSelect的textbox中最终显示内容的属性字段
// summary:
// 覆盖dijit.form._AutoCompleterMixin的同名方法，使FilteringSelect支持displayValueAttr指定textbox最终显示内容，而不是默认显示searchAttr指定的字段内容
_announceOption: function(/*Node*/ node){
if(!node){
return;
}
// pull the text value from the item attached to the DOM node
var newValue;
if(node == this.dropDown.nextButton ||
node == this.dropDown.previousButton){
newValue = node.innerHTML;
this.item = undefined;
this.value = '';
}else{
var item = this.dropDown.items[node.getAttribute("item")];
var displayAttr = this.displayValueAttr!=null?this.displayValueAttr:this.searchAttr;//此处判断是否配置了自定义属性displayValueAttr
newValue = (this.store._oldAPI ? // remove getValue() for 2.0 (old dojo.data API)
this.store.getValue(item, displayAttr) : item[displayAttr]).toString();//将this.searchAttr替换为displayAttr
this.set('item', item, false, newValue);
}
// get the text that the user manually entered (cut off autocompleted text)
this.focusNode.value = this.focusNode.value.substring(0, this._lastInput.length);
// set up ARIA activedescendant
this.focusNode.setAttribute("aria-activedescendant", domAttr.get(node, "id"));
// autocomplete the rest of the option to announce change
this._autoCompleteText(newValue);
},
});
});
然后，新建一个WebForm页面，放置一个FilteringSelect控件，数据源取值为页面类继承过来的userListstr字段，页面前台代码如下：
复制代码 代码如下:
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="OrgRelation.aspx.cs" Inherits="OrgRelation" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://www.jb51.net/Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<link href="https://www.jb51.net/Scripts/dojo/dijit/themes/claro/claro.css" type="text/css" />
<link href="https://www.jb51.net/Scripts/dojo/dojo/resources/dojo.css" type="text/css" />
<script src="https://www.jb51.net/Scripts/dojo/dojo/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
//参数设置
require([
'test/FilteringSelect',
'dojo/store/Memory',
'dojo/domReady!'
], function (FilteringSelect, Memory) {
var jsonstr = '<%=userListStr%>';
var json = jQuery.parseJSON(jsonstr);
var obj = {data:""};
obj['data'] = json;
var selectStore = new Memory(obj);
//创建FilteringSelect
var testSelect = new FilteringSelect({
id: "testSelect",
name: "test",
value: "",
store: selectStore,
searchAttr: 'py', //指定输入文本框进行用来进行检索的字段
labelAttr: 'name', //指定下拉菜单中显示的字段
displayValueAttr: 'name', //指定选中下拉菜单后显示在输入框中的字段
required: false,
autoComplete: false
}, "testSelect");
});
//注册失去焦点事件
window.onload = function () {
function selblur() {
var guid = dijit.byId('testSelect').attr('value');
alert(guid);
window.location.href = "OrgRelation.aspx?userId=" + guid;
return false;
}
var sel = dojo.byId("testSelect");
dojo.connect(sel, "onblur", selblur);
};
</script>
</head>
<body>
<form method="post" runat="server">
<div>
<strong>编辑用户部门关系</strong>
</div>
<div>选择用户:<input/>
</div>
</form>
</body>
</html>
最后，在页面加载事件中获取用户数据，序列化之后，赋给protected类型的userListstr字段。其中这里引用到微软提供的获取汉字拼音的类库ChnCharInfo.dll,代码请单如下：
复制代码 代码如下: