使用Dojo的FilteringSelect打造具有拼音检索功能的下拉菜单(上)

感谢王牌海盗的投稿！本文首发于：http://cosbor.web-144.com/?p=38

===============
在我们国内开发应用系统的过程中往往会遇到这样的需求：下拉菜单中的条目过多时，用户在筛选时往往非常费劲，希望能提供条目拼音简码的方式进行筛选，加快选择速度。而Dojo的FilteringSelect是个非常优秀的具有动态筛选及autoComplete的下拉菜单组件，我们尝试用它来实现一个具有拼音检索功能的下拉菜单。我们以一个三国人物选择的下拉菜单为例看看FilteringSelect的使用，注意demo使用的是dojo的1.8版本。

FilteringSelect.html
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 @H_502_63@ 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` `>` `title` `>下拉菜单</` `>` `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',//指定输入文本框进行用来进行检索的字段` `labelAttr: 'name',//指定下拉菜单中显示的字段` `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` `>` `>`

运行页面，在下拉菜单输入框中输入“zy”，发现下拉菜单已经可以根据输入的拼音简码进行过滤了，如下图：

这时，问题来了，你会发现当鼠标选定下拉菜单中条目，如选“周瑜”时，最终在输入框中呈现的并不是我们想要的中文名称“周瑜”而是该条目对应的py字段的值“zy”。这是因为FilteringSelect会以searchAttr属性中设置的字段作为最终显示结果。但这并不是我们想要的结果，我们希望显示的是中文的name字段。

经过翻看FilteringSelect的源码，发现可以对FilteringSelect进行一下小的改造来满足我们的要求。可以使用Dojo提供的自定义组件机制，通过继承FilteringSelect来创建一个满足我们需求的FilteringSelect组件。代码如下:

 
        define([ 
       
        "dojo/_base/declare" 
        , 
        // declare, 
       
        "dojo/dom-attr" 
        // domAttr.get 
       
        "dijit/form/FilteringSelect" 
       
        function 
        (declare,domAttr,FilteringSelect){ 
       
        return 
        declare( 
        "test.FilteringSelect" 
         
        displayValueAttr: 
        null 
        //新增一个自定义属性，用于指定FilteringSelect的textBox中最终显示内容的属性字段 
       
        // summary: 
       
        // 覆盖dijit.form._AutoCompleterMixin的同名方法，使FilteringSelect支持displayValueAttr指定textBox最终显示内容，而不是默认显示searchAttr指定的字段内容 
       
        _announceOption:  
        ( 
        /*Node*/ 
        node){ 
       
        if 
        (!node){ 
       
        ; 
       
        } 
       
        // pull the text value from the item attached to the DOM node 
       
        var 
        newValue; 
       
        (node ==  
        this 
        .dropDown.nextButton || 
       
        node ==  
        .dropDown.prevIoUsButton){ 
       
        newValue = node.innerHTML; 
       
        .item = undefined; 
       
        .value =  
        '' 
        ; 
       
        } 
        else 
        { 
       
        item =  
        .dropDown.items[node.getAttribute( 
        "item" 
        )]; 
       
        displayAttr =  
        .displayValueAttr!= 
        ? 
        .displayValueAttr: 
        .searchAttr; 
        //此处判断是否配置了自定义属性displayValueAttr 
       
        newValue = ( 
        .store._oldAPI ?  
        // remove getValue() for 2.0 (old dojo.data API) 
       
        .store.getValue(item,displayAttr) : item[displayAttr]).toString(); 
        //将this.searchAttr替换为displayAttr 
       
        .set( 
        'item' 
        false 
         
        } 
       
        // get the text that the user manually entered (cut off autocompleted text) 
       
        .focusNode.value =  
        .focusNode.value.substring(0,monospace !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; Box-sizing: content-Box !important; min-height: auto !important;">._lastInput.length); 
       
        // set up ARIA activedescendant 
       
        .focusNode.setAttribute( 
        "aria-activedescendant" 
        "id" 
        )); 
       
        // autocomplete the rest of the option to announce change 
       
        ._autoCompleteText(newValue); 
       
        }); 
       
        });

 
将页面中引入FilteringSelect换成我们自定义的FilteringSelect，然后在创建FilteringSelect时的代码中加入自定义的displayValueAttr属性。 
 
  
   
    
     
     
        19 
       
      
        20 
       
      
        38 
       
     <script type= 
        "text/javascript" 
        > 
        
        
        require([ 
        
        
        'test/FilteringSelect' 
         
        'dojo/store/Memory' 
         
        'dojo/domReady!' 
       
 
        
        (FilteringSelect,Memory){ 
        
        
         
        
        
        //下拉菜单的store，"py"字段存放每个条目的拼音简码 
        
        
        selectStore =  
        new 
        Memory({ 
        
        
        data:[ 
        
        
        {name: 
        '赵云' 
        '1' 
        'zy' 
         
        '张飞' 
        '2' 
        'zf' 
         
        '刘备' 
        '3' 
        'lb' 
         
        '关羽' 
        '4' 
        'gy' 
         
        '黄忠' 
        '5' 
        'hz' 
         
        '魏延' 
        '6' 
        'wy' 
         
        '周瑜' 
        '7' 
         
        '孙坚' 
        '8' 
        'sj' 
         
        '曹操' 
        '9' 
        'cc' 
         
        '夏侯敦' 
        '10' 
        'xhd' 
         
        ] 
       
 
        
        }); 
        
        
         
        
        
        //创建FilteringSelect 
        
        
        testSelect =  
        FilteringSelect({ 
        
        
        id:  
        "testSelect" 
         
        name:  
        "test" 
         
        value:  
        "" 
         
         
        searchAttr:  
        'py' 
        //指定输入文本框进行用来进行检索的字段 
       
 
        
        labelAttr:  
        'name' 
        //指定下拉菜单中显示的字段 
        
        
        displayValueAttr: 
        //指定选中下拉菜单后显示在输入框中的字段 
        
        
        required: 
         
        autoComplete: 
        false 
       
 
        
        ); 
        
        
         
        
        
        }); 
        
        
        </script>

使用Dojo的FilteringSelect打造具有拼音检索功能的下拉菜单(上)

猜你在找的Dojo相关文章