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

发布时间：2020-12-16 21:39:15 所属栏目：百科来源：网络整理

导读：感谢王牌海盗的投稿！本文首发于：http://cosbor.web-144.com/?p=38 ========= ====== 在我们国内开发应用系统的过程中往往会遇到这样的需求：下拉菜单中的条目过多时，用户在筛选时往往非常费劲，希望能提供条目拼音简码的方式进行筛选，加快选择速度。而Do

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

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

 
   ? 
  
     FilteringSelect.html 
    
        <!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>