dijit.form.FilteringSelect

require([ 
          'dojo/request/xhr', 
          'dijit/form/FilteringSelect', 
          'dojo/store/Memory',
          'dojo/domReady!' 
        ], function(xhr, FilteringSelect, Memory) {
	var _url = appRoot + "/businessquery/peoplepay/getPeople.action"; // 获取人员信息
	xhr(_url, {
		handleAs : "json"
	}).then(function(dataJson) {
	         //注意指定idProperty:'peopleC'
	         //Memory 属性idProperty的默认值为"id",而请求服务器返回的数据中没有以id作为键的数据    
		var myStore = new Memory({data:dataJson,idProperty:'peopleC'});

		var serManSelect = new FilteringSelect({
			id : "peopleId", //控件的id,根据控件的id可获取该控件的句柄
			name : "peopleId",
			value : 'peopleC', 
			store : myStore,
			searchAttr : 'peoplePinyin', //从请求数据中键为peoplePinyin的值作为源进行过滤
			displayValueAttr : 'peopleName', //所选项显示的值,实际的值参考value属性
			required : false,
			autoComplete : false,
			style : 'width: 120px; height: 17px;'
		}, "peopleId"); 

	});
});

require(["dojo/request/xhr"], function(xhr){
        xhr.post(appRoot + "/businessquery/peoplepay/getColumn.action", {
            handleAs: "json",
	    data:{peopleId:dijit.byId('peopleId').get('value')} //用户选取某一项的实际值,参考示例数据,这里是向服务器发送人员编码
	}).then(function(data){
            // Do something with the handled data
        });
});
<label>结帐人: <input id="peopleId" /></label>

请求服务端返回的数据(部分数据,多余数据未列出来):

[
    {
        "peopleC": "0802", 
        "peopleName": "[0802]边立平", 
        "peoplePinyin": "blp"
    }, 
    {
        "peopleC": "0407", 
        "peopleName": "[0407]包月蛟", 
        "peoplePinyin": "byj"
    }, 
    {
        "peopleC": "1258", 
        "peopleName": "[1258]陈傲", 
        "peoplePinyin": "ca"
    }
]

效果图:

你可能感兴趣的:(dojo,dijit,FilteringSelect)