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
        }
    }
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值