github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(form-select): 开启 lay-creatable 时，新创建的 option 元素显示在顶部 (#1950) 

* refactor(form-select): 开启 lay-creatable 时，新创建的 option 元素显示在顶部

* refactor: 优化键盘切换选中元素效果

1. fix: 开启 creatable 后方向键切换选中元素偶现异常
2. feat: 支持循环切换选中元素

* refactor: 改进选中项索引查找
pull/1969/head
morning-star 2024-05-31 22:26:43 +08:00 committed by GitHub
parent 230b910c64
commit 18348e2cb3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 25 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/modules/form.js
View File

@ -534,50 +534,27 @@ layui.define(['lay', 'layer', 'util'], function(exports){
}
// 标注 dd 的选中状态
var setThisDd = function(prevNext, thisElem1){
var nearDd, cacheNearElem
var setThisDd = function(prevNext){
e.preventDefault();
var allDisplayedElem = dl.children('dd:not(.'+ HIDE +',.'+ DISABLED +')');
if(!allDisplayedElem.length) return;
var firstIndex = 0;
var lastIndex = allDisplayedElem.length - 1;
var selectedIndex = -1;
// 得到当前队列元素
var thisElem = function(){
var thisDd = dl.children('dd.'+ THIS);
// 如果是搜索状态，且按 Down 键，且当前可视 dd 元素在选中元素之前，
// 则将当前可视 dd 元素的上一个元素作为虚拟的当前选中元素，以保证递归不中断
if(dl.children('dd.'+ HIDE)[0] && prevNext === 'next'){
var showDd = dl.children('dd:not(.'+ HIDE +',.'+ DISABLED +')')
,firstIndex = showDd.eq(0).index();
if(firstIndex >=0 && firstIndex < thisDd.index() && !showDd.hasClass(THIS)){
return showDd.eq(0).prev()[0] ? showDd.eq(0).prev() : dl.children(':last');
}
layui.each(allDisplayedElem, function(index, el){
if($(el).hasClass(THIS)){
selectedIndex = index;
return true;
}
})
var nextIndex = prevNext === 'prev'
? (selectedIndex - 1 < firstIndex ? lastIndex : selectedIndex - 1)
: (selectedIndex + 1 > lastIndex ? firstIndex : selectedIndex + 1)
if(thisElem1 && thisElem1[0]){
return thisElem1;
}
if(nearElem && nearElem[0]){
return nearElem;
}
return thisDd;
// return dds.eq(index);
}();
cacheNearElem = thisElem[prevNext](); // 当前元素的附近元素
nearDd = thisElem[prevNext]('dd:not(.'+ HIDE +')'); // 当前可视元素的 dd 元素
// 如果附近的元素不存在，则停止执行，并清空 nearElem
if(!cacheNearElem[0]) return nearElem = null;
// 记录附近的元素，让其成为下一个当前元素
nearElem = thisElem[prevNext]();
// 如果附近不是 dd ，或者附近的 dd 元素是禁用状态，则进入递归查找
if((!nearDd[0] || nearDd.hasClass(DISABLED)) && nearElem[0]){
return setThisDd(prevNext, nearElem);
}
nearDd.addClass(THIS).siblings().removeClass(THIS); // 标注样式
var selectedElem = allDisplayedElem.eq(nextIndex);
selectedElem.addClass(THIS).siblings().removeClass(THIS); // 标注样式
followScroll(); // 定位滚动条
};
@ -658,9 +635,11 @@ layui.define(['lay', 'layer', 'util'], function(exports){
if(createOptionElem[0]){
createOptionElem.attr('lay-value', value).html(util.escape(value));
}else{
var ddElem = $('<dd>');
ddElem.addClass(CREATE_OPTION).attr('lay-value', value).html(util.escape(value));
dl.append(ddElem);
// 临时显示在顶部
var ddElem = $('<dd>').addClass(CREATE_OPTION).attr('lay-value', value).html(util.escape(value));
var firstOptionELem = dl.children().eq(0);
var hasTips = firstOptionELem.hasClass('layui-select-tips');
firstOptionELem[hasTips ? 'after' : 'before'](ddElem);
}
}
}else{
@ -719,10 +698,10 @@ layui.define(['lay', 'layer', 'util'], function(exports){
othis.addClass(THIS);
}
// 将新增的 option 元素添加到末尾
if(isCreatable && othis.hasClass(CREATE_OPTION)){
othis.removeClass(CREATE_OPTION);
var optionElem = $('<option>');
optionElem.attr('value', value).text(othis.text());
dl.append(othis.removeClass(CREATE_OPTION));
var optionElem = $('<option>').attr('value', value).text(othis.text());
select.append(optionElem);
}