給select2 jQuery下拉條select美化及功能擴充套件外掛增加拼音篩選功能
阿新 • • 發佈：2019-02-15
select2美化了下拉框，它能讓醜陋的、很長的select選擇框變的更好看、更方便，支援搜尋，ajax遠端資料集，以及很多擴充套件功能，還開放了一些介面。
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>