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下载链接):

select2.js插件支持拼音搜索(最新版-4.0.6)_第1张图片

 

你可能感兴趣的:(select2.js插件支持拼音搜索(最新版-4.0.6))