拼音检索功能的下拉菜单(上)"/>
使用Dojo的FilteringSelect打造具有拼音检索功能的下拉菜单(上)
感谢王牌海盗的投稿！本文首发于：/?p=38
=======================================================================================
在我们国内开发应用系统的过程中往往会遇到这样的需求：下拉菜单中的条目过多时，用户在筛选时往往非常费劲，希望能提供条目拼音简码的方式进行筛选，加快选择速度。而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" ".dtd"> < html > < head > < title >下拉菜单</ title > < link rel = "stylesheet" href = "static/js/dojo/dojo/resources/dojo.css" /> < link rel = "stylesheet" href = "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 > < script type = "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',py:'zy'}, {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',//指定输入文本框进行用来进行检索的字段 labelAttr: 'name',//指定下拉菜单中显示的字段 required:false, autoComplete:false },"testSelect"); }); </ script > </ head > < body class = "claro" > < div style = "text-align: center;width: 100%;padding-top: 100px;font-size:15px;" > 三国人物:< input id = "testSelect" /> </ div > </ body > </ html > |
运行页面，在下拉菜单输入框中输入“zy”，发现下拉菜单已经可以根据输入的拼音简码进行过滤了，如下图：
这时，问题来了，你会发现当鼠标选定下拉菜单中条目，如选“周瑜”时，最终在输入框中呈现的并不是我们想要的中文名称“周瑜”而是该条目对应的py字段的值“zy”。这是因为FilteringSelect会以searchAttr属性中设置的字段作为最终显示结果。但这并不是我们想要的结果，我们希望显示的是中文的name字段。
经过翻看FilteringSelect的源码，发现可以对FilteringSelect进行一下小的改造来满足我们的要求。可以使用Dojo提供的自定义组件机制，通过继承FilteringSelect来创建一个满足我们需求的FilteringSelect组件。代码如下:
?| 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 | 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); }, }); }); |
将页面中引入FilteringSelect换成我们自定义的FilteringSelect，然后在创建FilteringSelect时的代码中加入自定义的displayValueAttr属性。
?| 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 | <script type= "text/javascript" > require([ 'test/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' ,py: 'zy' }, {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' , //指定输入文本框进行用来进行检索的字段 labelAttr: 'name' , //指定下拉菜单中显示的字段 displayValueAttr: 'name' , //指定选中下拉菜单后显示在输入框中的字段 required: false , autoComplete: false }, "testSelect" ); }); </script> |
再次访问本页面，可以看到在选择下拉菜单条目后，text输入框显示为name的中文了。
下篇预告：
准备写一下服务端自动实现新增实体bean时，将相应name字段转为拼音简码后存储。大致过程是编写一个java注解，在model实体类中标注需要进行汉字转拼音的属性字段，利用spring的AOP功能，编写一个统一切面，在dao层对保存实体的save方法进行拦截，将标注的name字段转为拼音简码后注入bean的拼音简码字段，这样使业务编码人员无需再关注对实体name字段进行拼音简码的转换工作。
更多推荐
使用Dojo的FilteringSelect打造具有拼音检索功能的下拉菜单(上)
发布评论