Merge pull request #1042 from hotlcc/feature/develop-select-search-filter-group

新增select分组选择框在开启搜索时支持过滤未匹配到分组元素的分组

examples/form.html

@@ -126,25 +126,71 @@
   </div>
   
   <div class="layui-form-item">
-    <label class="layui-form-label">搜索选择框</label>
-    <div class="layui-input-inline">
-      <select name="interest-search" lay-filter="interest-search" lay-search>
-        <option value="">请搜索</option>
-        <option value="写作">写作</option>
-        <option value="阅读" disabled>阅读</option>
-        <option value="游戏" disabled>游戏</option>
-        <option value="音乐">音乐</option>
-        <option value="旅行">旅行</option>
-        <option value="读书">读书</option>
-        <option value="1">layer</option>
-        <option value="2" disabled>laydate</option>
-        <option value="3">3</option>
-        <option value="4">layim</option>
-        <option value="5">laypage</option>
-        <option value="6">6</option>
-        <option value="7">7</option>
-        <option value="8">8</option>
-      </select>
+    <div class="layui-inline">
+      <label class="layui-form-label">搜索选择框</label>
+      <div class="layui-input-block">
+        <select name="interest-search" lay-filter="interest-search" lay-search>
+          <option value="">请搜索</option>
+          <option value="写作">写作</option>
+          <option value="阅读" disabled>阅读</option>
+          <option value="游戏" disabled>游戏</option>
+          <option value="音乐">音乐</option>
+          <option value="旅行">旅行</option>
+          <option value="读书">读书</option>
+          <option value="1">layer</option>
+          <option value="2" disabled>laydate</option>
+          <option value="3">3</option>
+          <option value="4">layim</option>
+          <option value="5">laypage</option>
+          <option value="6">6</option>
+          <option value="7">7</option>
+          <option value="8">8</option>
+        </select>
+      </div>
+    </div>
+    <div class="layui-inline">
+      <label class="layui-form-label">搜索分组框</label>
+      <div class="layui-input-block">
+        <select name="interest-search-group" lay-filter="interest-search-group" lay-search>
+          <option value="">请搜索</option>
+          <optgroup label="分组a">
+            <option value="a1">a1</option>
+            <option value="a2">a2</option>
+          </optgroup>
+          <optgroup label="分组aa">
+            <option value="aa1">aa1</option>
+            <option value="aa2">aa2</option>
+          </optgroup>
+          <optgroup label="分组b">
+            <option value="b1">b1</option>
+            <option value="b2">b2</option>
+          </optgroup>
+          <optgroup label="分组bb">
+            <option value="bb1">bb1</option>
+            <option value="bb2">bb2</option>
+          </optgroup>
+          <optgroup label="分组bbb">
+            <option value="bbb1">bbb1</option>
+            <option value="bbb2">bbb2</option>
+          </optgroup>
+          <optgroup label="分组c">
+            <option value="c1">c1</option>
+            <option value="c2">c2</option>
+          </optgroup>
+          <optgroup label="分组cc">
+            <option value="cc1">cc1</option>
+            <option value="cc2">cc2</option>
+          </optgroup>
+          <optgroup label="分组ccc">
+            <option value="ccc1">ccc1</option>
+            <option value="ccc2">ccc2</option>
+          </optgroup>
+          <optgroup label="分组cccc">
+            <option value="cccc1">cccc1</option>
+            <option value="cccc2">cccc2</option>
+          </optgroup>
+        </select>
+      </div>
     </div>
   </div>
   

src/modules/form.js

@@ -174,6 +174,7 @@ layui.define('layer', function(exports){
           ,input = title.find('input')
           ,dl = reElem.find('dl')
           ,dds = dl.children('dd')
+          ,dts = dl.children('dt') // select分组dt元素
           ,index =  this.selectedIndex //当前选中的索引
           ,nearElem; //select 组件当前选中的附近元素，用于辅助快捷键功能
           
@@ -187,6 +188,7 @@ layui.define('layer', function(exports){
             index = select[0].selectedIndex; //获取最新的 selectedIndex
             reElem.addClass(CLASS+'ed');
             dds.removeClass(HIDE);
+            dts.removeClass(HIDE);
             nearElem = null;
 
             //初始选中样式
@@ -347,6 +349,13 @@ layui.define('layer', function(exports){
               if(value === '' || (origin === 'blur') ? value !== text : not) num++;
               origin === 'keyup' && othis[not ? 'addClass' : 'removeClass'](HIDE);
             });
+            // 处理select分组元素
+            origin === 'keyup' && layui.each(dts, function(){
+              var othis = $(this)
+              ,thisDds = othis.nextUntil('dt').filter('dd') // 当前分组下的dd元素
+              ,allHide = thisDds.length == thisDds.filter('.' + HIDE).length; // 当前分组下所有dd元素都隐藏了
+              othis[allHide ? 'addClass' : 'removeClass'](HIDE);
+            });
             var none = num === dds.length;
             return callback(none), none;
           };