H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】select2.js插件支持拼音搜索(最新版-4.0.6)

通过两天的研究,学会使用select2.js,并且修改了select2.js的源代码,实现拼音搜索的功能(pinyin.js链接,将中文转换成拼音),下面主要讲解如何实现拼音搜索功能:

1.从https://select2.org/官网上下载最新的select2.js,学习新版本插件的用法(PS:学习一个新的事物,最好通过官方文档进行了解,这样获得的知识是最准确,少走弯路)

2.把select2.js、select2.css拷入自己项目的相应位置

问题一:从github下载的文件怎么阅读,那个文件夹下存放的select2.js和select2.css文件

 github目录结构说明:

dist  是指编译后的文件,可以理解为压缩发布版(select2.js和select2.css在那个文件下

src   源码文件,适合动手能力强的童鞋

docs 文档

examples 示例文件

test 测试脚本

.gitignore 告诉git哪些文件不要上传到 GitHub,比如数据库配置文件等

LICENSE.txt  授权协议 

README.md 自述文件,整个项目的简介、使用方法等

bower.json Bower 包管理器配置文件

package.json npm 包管理器配置文件

3.在select2.js源代码中进行修改,支持拼音搜索:

拼音搜索的原理:

将下拉框选项中的中文转换成汉语拼音,然后与输入的字母进行比较,如果包含则被检索出来。

修改代码:

在select2.js中找到matcher 方法,对此方法进行修改。

  function matcher (params, data) {
// Always return the object if there is nothing to compare
if ($.trim(params.term) === '') {
return data;
}
// Do a recursive check for options with children
if (data.children && data.children.length > 0) {
// Clone the data object if there are children
// This is required as we modify the object to remove any non-matches
var match = $.extend(true, {}, data);
// Check each child of the option
for (var c = data.children.length - 1; c >= 0; c--) {
var child = data.children[c];
var matches = matcher(params, child);
// If there wasn't a match, remove the object in the array
if (matches == null) {
match.children.splice(c, 1);
}
}
// If any children matched, return the new object
if (match.children.length > 0) {
return match;
}
// If there were no matching children, check just the plain object
return matcher(params, match);
}
//支持中文拼音搜索 2018-09-30
var original = '';
//搜索输入的字母
var term = stripDiacritics(params.term).toUpperCase();
if (stripDiacritics(data.text).toPinYin != undefined){
original = stripDiacritics(data.text).toPinYin().toString().indexOf(term);
if(original==-1){
//此处是在中文没有匹配时,匹配对应的拼音
original = stripDiacritics(data.text).toUpperCase().indexOf(term);
}
}
// 修改
if (original> -1) {
return data;
}
// If it doesn't contain the term, don't return anything
return null;
}

4.实现的Demo(Demo下载链接):

【JS】select2.js插件支持拼音搜索(最新版-4.0.6)

 

本文地址:H5W3 » 【JS】select2.js插件支持拼音搜索(最新版-4.0.6)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址