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

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

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

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

* refactor: 改进选中项索引查找

src/modules/form.js

@@ -534,50 +534,27 @@ layui.define(['lay', 'layer', 'util'], function(exports){
             }
             
             // 标注 dd 的选中状态
-            var setThisDd = function(prevNext, thisElem1){
+            var setThisDd = function(prevNext){
-              var nearDd, cacheNearElem
               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;
 
-              // 得到当前队列元素  
+              layui.each(allDisplayedElem, function(index, el){
-              var thisElem = function(){
+                if($(el).hasClass(THIS)){
-                var thisDd = dl.children('dd.'+ THIS);
+                  selectedIndex = index;
-                
+                  return true;
-                // 如果是搜索状态，且按 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');
-                  }
                 }
+              })
     
-                if(thisElem1 && thisElem1[0]){
+              var nextIndex = prevNext === 'prev'
-                  return thisElem1;
+                ? (selectedIndex - 1 < firstIndex ? lastIndex : selectedIndex - 1)
-                }
+                : (selectedIndex + 1 > lastIndex ? firstIndex : selectedIndex + 1)
-                if(nearElem && nearElem[0]){
-                  return nearElem;
-                }
 
-                return thisDd;
+              var selectedElem = allDisplayedElem.eq(nextIndex);
-                // return dds.eq(index);
+              selectedElem.addClass(THIS).siblings().removeClass(THIS); // 标注样式
-              }();
-              
-              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); // 标注样式
               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));
+                    var ddElem = $('<dd>').addClass(CREATE_OPTION).attr('lay-value', value).html(util.escape(value));
-                    dl.append(ddElem);
+                    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);
+              dl.append(othis.removeClass(CREATE_OPTION));
-              var optionElem = $('<option>');
+              var optionElem = $('<option>').attr('value', value).text(othis.text());
-              optionElem.attr('value', value).text(othis.text());
               select.append(optionElem);
             }