select2.js插件支持拼音搜索（最新版-4.0.6）

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

1.从Getting Started | Select2 - The jQuery replacement for select boxes官网上下载最新的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 compareif ($.trim(params.term) === '') {return data;}// Do a recursive check for options with childrenif (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-matchesvar match = $.extend(true, {}, data);// Check each child of the optionfor (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 arrayif (matches == null) {match.children.splice(c, 1);}}// If any children matched, return the new objectif (match.children.length > 0) {return match;}// If there were no matching children, check just the plain objectreturn matcher(params, match);}//支持中文拼音搜索 2018-09-30var 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 anythingreturn null;}

4.实现的Demo（Demo下载链接）：

select2.js插件支持拼音搜索（最新版-4.0.6）相关推荐

自制Unity文件查找器，支持拼音搜索
前言一个大型项目,配置表上千个是很正常的,这个时候想要搜索某个配置表,是有点蛋疼的事情. 自己写个配置查找器吧,效果如下: 优点: 搜索速度快: 支持拼音搜索: 支持快速打开: 缺点: 拼音只能挨个 ...
select2.js插件新增支持拼音搜索
话不多说直奔主题 1.拼音搜索的原理: 将下拉框选项中的中文转换成汉语拼音,然后与输入的字母进行比较,如果包含则被检索出来. 2.效果: 3.在select2.js中找到matcher 方法,对此方法 ...
Elasticsearch如何修改拼音分词插件支持音调搜索
背景 es默认加载的拼音分词插件是不支持音调搜索的,如何修改插件使得它支持音调搜索?又或者多音字你想要默认的读音是另外一个,例如曾默认读音是ceng,我想修改其默认读音为zeng. 下载拼音分词插件代 ...
java ajax多文件上传插件_ajaxFileUpload.js插件支持多文件上传的方法
前提条件: ajaxFileUpload.js插件多文件上传步骤: 1.修改源码,(源码只支持单个文件的上传): //修改前代码------- //var oldElement = jQuery(' ...
ajaxFileUpload.js插件支持多文件上传的方法
前提条件: ajaxFileUpload.js插件多文件上传步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码代码如下: //修改前代码------- //var oldElement ...
Elasticsearch之拼音搜索(十五)
拼音搜索在中文搜索环境中是经常使用的一种功能,用户只需要输入关键词的拼音全拼或者拼音首字母,搜索引擎就可以搜索出相关结果.在国内,中文输入法基本上都是基于汉语拼音的,这种在符合用户输入习惯的条件下缩短 ...
html播放mov格式视频,jQuery及video标签视频播放弹窗插件支持mp4,mov等格式详解(图文)...
在做html5做播放视频时,如果是mp4,ogg,webm等视频格式,用h5自带的video标签就可以实现,但苹果的mov格式视频video标签是不支持的. h5实现mp4视频播放:video标签仅支 ...
select2.js实现拼音搜索支持
拼音搜索的原理: 将下拉框选项中的中文转换成汉语拼音(或拼音首字母),然后与输入的字母进行比较,如果包含则被检索出来. 引用插件: 1. pinyin.js文件用于将汉字转化为拼音的JavaScrip ...
signature=daa3bbe3ad9a7c162ba9d98f8d9e7530,解决select2插件下拉搜索框，输入拼音能够匹配中文汉字的问题...
首先肯定需要引用select2.js:点击打开链接,点击链接,自己新建一个select2.js把链接中的源码复制进去: 然后这里面需要修改的是这个方法: function matcher (param ...
Simple: 一个支持中文和拼音搜索的 sqlite fts5插件
之前的工作关系,需要在手机上支持中文和拼音搜索.由于手机上存储数据一般都是用 sqlite,所以是基于 sqlite3 fts5 来实现.这段时间再次入门 c++,所以想用 c++ 实现一下,一来用于 ...

select2.js插件支持拼音搜索（最新版-4.0.6）

select2.js插件支持拼音搜索（最新版-4.0.6）相关推荐

最新文章

热门文章