给select2 jQuery下拉条select美化及功能扩展插件增加拼音筛选功能

最新推荐文章于 2020-11-26 20:43:59 发布

lady911

最新推荐文章于 2020-11-26 20:43:59 发布

阅读量4.5k

点赞数

本文链接：https://blog.csdn.net/lady911/article/details/8827581

版权

select2美化了下拉框，它能让丑陋的、很长的select选择框变的更好看、更方便，支持搜索，ajax远程数据集，以及很多扩展功能，还开放了一些接口。

select2下载地址

select2插件可以智能判断位置，选择向下或向上展开。

select2，有中文本地化语言支持，不过不支持拼音筛选。

但是，因为select2开放了一些接口，要为它增加拼音筛选功能还是很容易的。

<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<title>下拉条拼音筛选演示</title>
<link href="js/select2.css" rel="stylesheet"/>
<script src="js/jQuery19.js"></script>
<script type="text/javascript" src="js/select2.min.js"></script>
<script type="text/javascript" src="js/select2_locale_zh-CN.js"></script>
<script type="text/javascript" src="js/mod.udatas.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#mingren").select2({
		matcher: function(term, text) {
			var mod=ZhToPinyin(text);
			var tf1=mod.a.toUpperCase().indexOf(term.toUpperCase())==0;
			var tf2=mod.b.toUpperCase().indexOf(term.toUpperCase())==0;
			return (tf1||tf2);
		}
	});
});
</script>
</head>

上面的代码，使用了select2的mathcher扩展功能接口，利用ZhToPinyin函数，扩展出了拼音首字母和全拼的筛选功能，同时保留原英文筛选。

完整的演示代码下载地址

在ie8+上使用，必须在html文本的最前面加上<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">，或者简单的加上<!DOCTYPE HTML>

lady911

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
给select2 jQuery下拉条select美化及功能扩展插件增加拼音筛选功能

select2美化了下拉框，它能让丑陋的、很长的select选择框变的更好看、更方便，支持搜索，ajax远程数据集，以及很多扩展功能，还开放了一些接口。select2下载地址select2插件可以智能判断位置，选择向下或向上展开。select2，有中文本地化语言支持，不过不支持拼音筛选。但是，因为select2开放了一些接口，要为它增加拼音筛选功能还是很容易的。下拉条拼
复制链接

扫一扫