easyui的combobox根据拼音搜索选项_easyui下拉框通过拼音查询-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangwenhuad/article/details/78518530

本文介绍如何使用EasyUI的ComboBox组件结合汉字转拼音的JS包实现支持拼音首字母及全拼搜索的功能。通过示例代码展示了如何配置ComboBox的filter属性以达到期望的搜索效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前情背景也就不交代了，这个用着还是比较简单。

需要引入对应的汉字转拼音的js包，用了一个实测可以用的已上传

http://download.youkuaiyun.com/download/zhangwenhuad/10116009

用的easyui的ComboBox进行下拉框的渲染

ComboBox对查询的处理对应的是里边的filter属性

函数有2个参数：
q：用户输入的文本。
row：列表行数据。
返回true的时候允许行显示。

代码示例：

$(id).combobox({
	filter: function(q, row){
		var opts = $(this).combobox('options');
		return row[opts.textField].indexOf(q) == 0;
	}
});

这是api里边的属性说明。

程序引入对应的拼音的js

这个js中的getCamelChars()方法为获取对应首字母

ComboBox的过滤进行重新筛选。这里会自动循环调用过滤，不需要额外写循环。

$(id).combobox({
	filter: function(q, row){
		var opts = $(this).combobox('options');

 		var text = row[opts.textField];//下拉的对应选项的汉字
 		var pyjp = pinyin.getCamelChars(text).toLowerCase();//根据选项名字转换对应的拼音首字母并转换为小写
 		var pyqp = pinyin.getFullChars(text).toLowerCase();//拼音全拼备用

 		if(row[opts.textField].indexOf(q) > -1 || pyqp.indexOf(q.toLowerCase()) > -1){
 			return true;
 		}		
	}
});

转换也比较简单，原来没用过的时候感觉一头雾水。也想过用select2的来渲染，发现easyui的也是挺简单的。留着备忘。。