您好,欢迎来到步遥情感网。
搜索
您的当前位置:首页Easy UI中combobox利用拼音进行筛选

Easy UI中combobox利用拼音进行筛选

来源:步遥情感网

关于网上找的easyUI中combobox通过拼音进行筛选下拉框内容的问题,写的太过专业,作为技术小白的我反正没看懂,自己写了一个小例子,下次遇到给自己提个醒。

Easy UI中combobox利用拼音进行筛选
前端页面显示

<select class="easyui-combobox" id="FAULTNAME" name="FAULTNAME" style="width:96%;height:50px" 
data-options="panelHeight:'auto',filter:filterCombo" ></select>

至于options,每个人获取方式不一样,我是在页面加载完全后遍历整个datagrid中的信息获取。

var FAULT_NAME = [];
dg.datagrid({
            onLoadSuccess:function(data){
                for(var i = 0; i < dg.datagrid("getRows").length; i++){
                    var rowData = dg.datagrid("getRows")[i];
                    var insertFaultName = {};

                    insertFaultName.value = rowData.FAULTNAME;
                    insertFaultName.text = rowData.FAULTNAME;

                    FAULT_NAME.push(insertFaultName);

                }
                $("#FAULTNAME").combobox('loadData',FAULT_NAME);
            }
        });

在页面中引入ChinesePY.js文件,网上一大堆这个文件,很好搜

<script type="text/javascript" src="ChinesePY.js"></script>

这里写一下filterCombo方法

function filterCombo(q,row){
        var opts = $(this).combobox('options');
        var tmpValue = row.value;
        var tmpText = row.text;
        //Pinyin.GetQP是ChinesePYthon.js文件中定义的,目的是将汉语转化为对应的全拼,此处将转化后的拼音与输入的’p’进行筛选
        row.value = Pinyin.GetQP(row.value);
        row.text = Pinyin.GetQP(row.text);
        if(row[opts.textField].indexOf(q) == 0){
            //这里一定要把拼音转回来变成汉字,否则输入搜索的p以后,当遇到匹配的option并选中,传递回来的是汉语的全拼而非汉语本身。
row.value = tmpValue;
            row.text = tmpText;
            return true;
        }else{
            row.value = tmpValue;
            row.text = tmpText;
            return false
        }
    }

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- obuygou.com 版权所有 赣ICP备2024042798号-5

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务