您的位置：首页 > Web前端 > JQuery

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

2013-04-20 12:51 1101 查看


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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航