Layui

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架。亲测很好用，很好看。
官网：http://www.layui.com/
github：https://github.com/sentsin/layui

插播一条相关博客：Layui-select 修复搜索之后上下键的bug

研究select搜索功能的实现

layui的select组件自带搜索功能，只要在select标签里面添加属性search=""即可。
但是如果选项非常多，很多人会想，如果能够用拼音快速地搜索匹配就更好了，我只要输入拼音前面几个字母，就能够快速匹配到我想要的选项。但是这个功能Layui的select没有帮我们实现。
没关系，我们来读读它的源代码，很快就能找到搜索功能是怎么实现的，我们在这里自己加上我们的代码就可以实现啦。

此时注意：这里的源代码指的是原始代码。我们从官网下载下来的js文件都是经过压缩的，所以你如果直接打开form.js文件进行解读并修改你会晕倒到电脑前的。所以你可以前往github拷贝下form.js文件进行修改，github上的文件都是源文件哦。

首先毫无疑问，select组件的功能就是放在form.js里面啦。
我们可以看到select的搜索功能中，调用了一个叫notOption的函数来判断是否有匹配的选项。

我们找到这个函数之后，发现判断输入内容与各选项是否匹配的是这个语句：

那我们就可以从这个语句入手啦。

开始动手解决

之前在使用easyUI框架的时候，我也动手实现过它的select下拉框拼音搜索功能。因此，结合上一次的实现，这一次根据layui的select组件的dom实现特点做一些改动。（有机会写一个easyUI的实现方法，只是easyUI的解决方法还是挺多
的，可以根据自己的实际需求做改动）

一、引进插件
首先我们要先引进一个pinyin.js文件，它是一个将汉字转换为拼音的JavaScript插件，并且支持多音字，直接使用ConvertPinyin(text)获取。http://www.uedsc.com/pinyin-js.html 这个网址是这个插件的介绍。
还要引进一个initials.js文件，它是提取汉字首字母的，返回的是一个大写字母字符串组成的数组，当然这个数组只有一个元素。获取时应正确使用：makePy(text)[0]。
为了方便，以上两个已上传到我的码云和github，CSDN资源库也有，可前往下载：
码云：https://gitee.com/onionoo/pinyin.js
github：https://github.com/onionooO/ChineseToPinyinAndInitials
CSDN资源：全拼：https://download.csdn.net/download/sinat_39571186/10417956
首字母：https://download.csdn.net/download/sinat_39571186/10417947

二、修改代码
我们将输入值是否与选项匹配的not变量用一个函数myFilter来实现。在下图这个位置改动一下代码，同时添加一个获取选项value的变量id：

接下来就是myFilter函数的实现了。在notOption函数上面加一个函数myFilter：

重点是在画框框的这个判断语句，可以根据自己的需求来实现。
ConvertPinyin(text).substring(0, len) === value 这句语句是为了实现拼音从头到尾地匹配，这就要求你要全拼。匹配效果如下：

makePy(text)[0].toLowerCase().substring(0, len) === value 这句语句是实现首字母从头到尾匹配，匹配效果如下：

这样基本就能够实现拼音全拼和首字母匹配了。（因为可能涉及到公司一些东西，所以就打了码，能看懂就好。）

注意

顺便一提，我们可以发现，Layui的select组件和普通的select并不一样，它是用定义列表dl、dd来排列选项的。

这也是notOption函数中的dds的来历以及对dds进行遍历的原因，同时也是我选择在源代码里面做改动的原因。

我本来想要另外重写一下那个notOption函数，尽量不要去改动源代码的。然后我发现dds的获取好像挺有讲究的，在函数前面老远老远的地方，看图：

然后我就放弃重写了，除了我懒之外，还怕破坏一些东西，就直接在源代码里面修改了。

补充：layui-select搜索出来之后存在一个上下键搜索的bug，解决请看另一篇博客：Layui-select 修复搜索之后上下键的bug

最后

还是贴一下代码吧。建议还是读一下源代码，或看一下上面的内容，下次作者再次更新代码的时候，就知道在哪个地方做修改了。
注意，第一步引入两个文件，pinyin.js和initials.js。第二步，如果你引用的是layui.all.js文件，那么你就要改一下了，要改成引用layui.js文件哦。

//搜索过滤器
var myFilter = function(value, text, id) {var result;if (escape(value).indexOf("%u") != -1) { //汉字result = text.indexOf(value) > -1;} else {var len = value.lengthresult = ConvertPinyin(text).substring(0, len) === value || makePy(text)[0].toLowerCase().substring(0, len) === value || text.toLowerCase().indexOf(value) > -1 || (id === undefined ? false : id.indexOf(value) > -1);}if (result == true) {return false;} else {return true;}
};//检测值是否不属于 select 项
var notOption = function(value, callback, origin) {var num = 0;layui.each(dds, function() {var othis = $(this),text = othis.text(),id = othis.attr("layui-value")// ,not = text.indexOf(value) === -1,not = myFilter(value, text, id);//value为input框输入的值，//text是当前dd的值，即当前被遍历到的选项，//id为当前dd的layui-value属性if (value === '' || (origin === 'blur') ? value !== text : not) num++;origin === 'keyup' && othis[not ? 'addClass' : 'removeClass'](HIDE);});var none = num === dds.length;return callback(none), none;
};

最最后

需转载请联系作者。

Layui-select 下拉框实现拼音全拼匹配/首字母模糊搜索相关推荐

layui select(下拉框)修改事件监听
layui select(下拉框)修改事件监听示例(节选): 当下拉框选项修改后,自动执行my_function函数. HTML部分: <select id="camera_strea ...
layui select下拉框（弹窗中的）
1.html代码 <div id="assignRoles" style="display: none"> <!--style="d ...
layui select下拉框联动
背景:涉及到省市县获取的项目必有下拉框三级联动,每次都需要百度查询,或者去翻原来的项目,着实不方便.因此,为了自己对三级联动的印象加深,同时也帮助第一次接触下拉框三级联动的小伙伴快速上道,总结一下该 ...
html下拉列表值发生改变,layui select下拉框监听值变化 layui 下拉列表的change事件...
layui下拉列表的事件不能用jq的change 应该用自带的方式写默认情况下,事件所监听的是全部的form模块元素,但如果你只想监听某一个元素,使用事件过滤器即可. 如: 监听select 下拉选 ...
java获取汉字拼音_Java获取汉字对应的拼音(全拼或首字母)
Java 根据汉语字符串获得对应的拼音字符串或者拼音首字母字符串等操作,需要添加jar包: 代码实现: import java.util.regex.Matcher; import java.util ...
java全拼_Java获取汉字对应的拼音(全拼或首字母)
java 根据汉语字符串获得对应的拼音字符串或者拼音首字母字符串等操作,需要添加jar包: 引入包代码实现: import java.util.regex.matcher; import java. ...
layui select下拉框改变之 change 监听事件
在layui中使用 jquery 触发select 的 change事件无效使用layui.use监听select事件 <select lay-filter="demo" ...
layui怎么给下拉框赋值_layui给select下拉框赋值
转: layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function() { var form = la ...
vba 全拼_[求助]如何把中文名字转换为拼音（全拼、首字母）
你的位置: 问答吧 -> excel -> 问题详情 [求助]如何把中文名字转换为拼音(全拼.首字母) 现需要把中文名字的拼音做企业邮箱的名字,姓用全拼,名用首字母,比如刘翔为liux,应 ...
layui给select下拉框赋值
layui给select下拉框赋值 //重新渲染表单函数function renderForm() {layui.use('form', function() {var form = layui.fo ...

Layui-select 下拉框实现拼音全拼匹配/首字母模糊搜索

Layui

研究select搜索功能的实现

开始动手解决

注意

最后

最最后

Layui-select 下拉框实现拼音全拼匹配/首字母模糊搜索相关推荐

最新文章

热门文章