floraachy/layui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(form-select): 改进 lay-search 属性，支持设置「是否大小写敏感」和「模糊搜索」

Browse Source 
feat(form-select): 弃用 `lay-search="cs"`，新增 `lay-search="{caseSensitive:false, fuzzy: false}"` 方式 (#2121)
This commit is contained in:
morning-star 2024-07-26 23:29:25 +08:00 committed by GitHub
parent 829bedc706
commit 6a23ada7d3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/form/index.md
View File

@ -116,7 +116,7 @@ form 还可以借助*栅格*实现更灵活的响应式布局。
| lay-reqtext | 自定义 | 设置*必填项*（`lay-verify="required"`）的默认提示文本 |
| lay-affix | [#详见](input.html#affix) | 输入框动态点缀，`<input type="text">`元素 **私有属性** |
| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 `<input type="checkbox">`，`<input type="radio">` 元素 **私有属性** |
| lay-search | 默认不区分大小写;<br>设置`cs`区分大小写 | 给 `select` 组件开启搜索功能。`<select>` 元素 **私有属性** |
| lay-search |<sup>2.9.15+</sup> `lay-search="{caseSensitive:false, fuzzy: false}"` <br>`caseSensitive` 是否区分大小写，默认值为 `false` <br>`fuzzy`是否开启模糊匹配，开启后将会忽略匹配字符出现在字符串中的位置，默认值为 `false` <br>设置`cs`区分大小写(2.9.15+ 已弃用) | 给 `select` 组件开启搜索功能。`<select>` 元素 **私有属性** |
| lay-creatable <sup>2.9.7+</sup> | 无需值 | 是否允许创建新条目，需要配合 `lay-search` 使用。`<select>` 元素 **私有属性** |
| lay-append-to <sup>2.9.12+</sup> <sup>实验性</sup> | `body` | 是否将 select 面板追加到 body 元素中。`<select>` 元素 **私有属性** |
| lay-append-position <sup>2.9.12+</sup> <sup>实验性</sup> | `absolute` 绝对定位 (默认)<br>`fixed` 固定定位 | 用于设置 select 面板开启 `lay-append-to` 属性后的定位方式。`<select>` 元素 **私有属性** |

28
src/modules/form.js
View File

@ -400,8 +400,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
if(disabled) return;
// 搜索项
var laySearch = select.attr('lay-search');
/**
* 搜索项
* @typedef searchOption
* @prop {boolean} [caseSensitive=false] 是否区分大小写
* @prop {boolean} [fuzzy=false] 是否开启模糊匹配，开启后将会忽略模式出现在字符串中的位置。
*/
/** @type {searchOption} */
var laySearch = select.attr('lay-search') === 'cs' ? {caseSensitive:true} : lay.options(select, {attr:'lay-search'});
// 目前只支持 body
var appendTarget = select.attr('lay-append-to') || 'body';
var appendPosition = select.attr('lay-append-position');
@ -593,11 +599,13 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var dds = dl.children('dd');
var hasEquals = false;
var rawValue = value;
var caseInsensitive = laySearch !== 'cs';
if(caseInsensitive){
var fuzzyMatchRE;
if(!laySearch.caseSensitive){
value = value.toLowerCase();
}
var fuzzyMatch = fuzzyMatchRegExp(value, caseInsensitive);
if(laySearch.fuzzy){
fuzzyMatchRE = fuzzyMatchRegExp(value, laySearch.caseSensitive);
}
layui.each(dds, function(){
var othis = $(this);
var text = othis.text();
@ -609,12 +617,12 @@ layui.define(['lay', 'layer', 'util'], function(exports){
}
// 是否区分大小写
if(caseInsensitive){
if(!laySearch.caseSensitive){
text = text.toLowerCase();
}
// 匹配
var not = !fuzzyMatch.test(text);
var not = laySearch.fuzzy ? !fuzzyMatchRE.test(text) : text.indexOf(value) === -1;
if(value === '' || (origin === 'blur') ? value !== text : not) num++;
origin === 'keyup' && othis[(isCreatable ? (not && !isCreateOption) : not) ? 'addClass' : 'removeClass'](HIDE);
@ -1237,14 +1245,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
return layui.event.call(this, MOD_NAME, 'submit('+ layFilter +')', params);
};
function fuzzyMatchRegExp(keyword, caseInsensitive) {
function fuzzyMatchRegExp(keyword, caseSensitive) {
var wordMap = {};
var regexPattern = ['^'];
var escapeRegExp = function(str){
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
if(caseInsensitive)keyword = keyword.toLowerCase();
if(!caseSensitive)keyword = keyword.toLowerCase();
// 统计关键字中各字符出现次数
var wordArr = keyword.trim().split('');
@ -1266,7 +1274,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
}
regexPattern.push('.*');
return new RegExp(regexPattern.join(''), caseInsensitive ? 'i' : undefined);
return new RegExp(regexPattern.join(''), !caseSensitive ? 'i' : undefined);
}
var form = new Form();