感谢王牌海盗的投稿!本文首发于:http://cosbor.web-144.com/?p=38
===============@H_403_5@@H_403_5@@H_403_5@@H_403_5@@H_403_5@@H_403_5@@H_403_5@@H_403_5@@H_403_5@@H_403_5@
在我们国内开发应用系统的过程中往往会遇到这样的需求:下拉菜单中的条目过多时,用户在筛选时往往非常费劲,希望能提供条目拼音简码的方式进行筛选,加快选择速度。而Dojo的FilteringSelect是个非常优秀的具有动态筛选及autoComplete的下拉菜单组件,我们尝试用它来实现一个具有拼音检索功能的下拉菜单。我们以一个三国人物选择的下拉菜单为例看看FilteringSelect的使用,注意demo使用的是dojo的1.8版本。
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html
>
head
>
link
rel
=
"stylesheet"
href
"static/js/dojo/dojo/resources/dojo.css"
/>
"static/js/dojo/dijit/themes/claro/claro.css"
/>
script
type
"text/javascript"
src
"static/js/dojo/dojo/dojo.js"
data-dojo-config
"async: true,parSEOnLoad: true"
></
script
>
"text/javascript"
>
require([
'dijit/form/FilteringSelect',
'dojo/store/Memory',
'dojo/domReady!'
],function(FilteringSelect,Memory){
//下拉菜单的store,"py"字段存放每个条目的拼音简码
var selectStore = new Memory({
data:[
{name:'赵云',id:'1',py:'zy'},
{name:'张飞',id:'2',py:'zf'},
{name:'刘备',id:'3',py:'lb'},
{name:'关羽',id:'4',py:'gy'},
{name:'黄忠',id:'5',py:'hz'},
{name:'魏延',id:'6',py:'wy'},
{name:'周瑜',id:'7',
{name:'孙坚',id:'8',py:'sj'},
{name:'曹操',id:'9',py:'cc'},
{name:'夏侯敦',id:'10',py:'xhd'},
]
});
//创建FilteringSelect
var testSelect = new FilteringSelect({
id: "testSelect",
name: "test",
value: "",
store: selectStore,
searchAttr: 'py',//指定输入文本框进行用来进行检索的字段
required:false,
autoComplete:false
},"testSelect");
});
</
>
>
body
class
"claro"
>
div
style
"text-align: center;width: 100%;padding-top: 100px;font-size:15px;"
>
三国人物:<
input
id
"testSelect"
/>
div
>
body
>
>
|
@H_404_426@
运行页面,在下拉菜单输入框中输入“zy”,发现下拉菜单已经可以根据输入的拼音简码进行过滤了,如下图:
这时,问题来了,你会发现当鼠标选定下拉菜单中条目,如选“周瑜”时,最终在输入框中呈现的并不是我们想要的中文名称“周瑜”而是该条目对应的py字段的值“zy”。这是因为FilteringSelect会以searchAttr属性中设置的字段作为最终显示结果。但这并不是我们想要的结果,我们希望显示的是中文的name字段。
经过翻看FilteringSelect的源码,发现可以对FilteringSelect进行一下小的改造来满足我们的要求。可以使用Dojo提供的自定义组件机制,通过继承FilteringSelect来创建一个满足我们需求的FilteringSelect组件。代码如下:
将页面中引入FilteringSelect换成我们自定义的FilteringSelect,然后在创建FilteringSelect时的代码中加入自定义的displayValueAttr属性。