首页>>表单>>支持搜索的下拉框,同一页面可以多次使用(2019-07-31)

支持搜索的下拉框,同一页面可以多次使用

支持搜索的下拉框,同一页面可以多次使用
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="layui-form-item">  
  2.             <label class="layui-form-label">带搜索的下拉框</label>  
  3.             <div class="layui-input-inline">  
  4.                 <div class="layui-form-select ySearchSelect y1">  
  5.                     <div class="layui-input"></div>  
  6.                     <i class="layui-edge"></i>  
  7.                     <ul>  
  8.                         <li class="on" value="id0001">大白菜</li>  
  9.                         <li class="on" value="id0002">土豆</li>  
  10.                         <li class="on" value="id0003">西红柿</li>  
  11.                         <li class="on" value="id0004">黄瓜</li>  
  12.                         <li class="on" value="id0005">黄花菜</li>  
  13.                         <li class="on" value="id0005">黄花菜1</li>  
  14.                         <li class="on" value="id0005">黄花菜2</li>  
  15.                         <li class="on" value="id0006">恍惚</li>  
  16.                         <li class="on" value="id0007">恍惚是</li>  
  17.                         <li class="on" value="id0005">黄花菜3</li>  
  18.                         <li class="on" value="id0005">黄花菜4</li>  
  19.                         <li class="on" value="id0006">恍惚1</li>  
  20.                         <li class="on" value="id0007">恍惚是2</li>  
  21.                         <p>无匹配项</p>  
  22.                     </ul>  
  23.                 </div>  
  24.             </div>  
  25.             <script>  
  26.                 $(function() {  
  27.                     $(".y1").ySearchSelect(); //调用自定义 高亮插件  
  28.                 })  
  29.             </script>  
  30.         </div>  
  31.         <div class="layui-form-item">  
  32.             <label class="layui-form-label">带搜索的下拉框</label>  
  33.             <div class="layui-input-inline">  
  34.                 <div class="layui-form-select ySearchSelect y2">  
  35.                     <div class="layui-input"></div>  
  36.                     <i class="layui-edge"></i>  
  37.                     <ul>  
  38.                         <li class="on" value="id0001">大白菜</li>  
  39.                         <li class="on" value="id0002">土豆</li>  
  40.                         <li class="on" value="id0003">西红柿</li>  
  41.                         <li class="on" value="id0004">黄瓜</li>  
  42.                         <li class="on" value="id0005">黄花菜</li>  
  43.                         <li class="on" value="id0005">黄花菜1</li>  
  44.                         <li class="on" value="id0005">黄花菜2</li>  
  45.                         <li class="on" value="id0006">恍惚</li>  
  46.                         <li class="on" value="id0007">恍惚是</li>  
  47.                         <li class="on" value="id0005">黄花菜3</li>  
  48.                         <li class="on" value="id0005">黄花菜4</li>  
  49.                         <li class="on" value="id0006">恍惚1</li>  
  50.                         <li class="on" value="id0007">恍惚是2</li>  
  51.                         <p>无匹配项</p>  
  52.                     </ul>  
  53.                 </div>  
  54.             </div>  
  55.             <script>  
  56.                 $(function() {  
  57.                     $(".y2").ySearchSelect(); //调用自定义 高亮插件  
  58.                 })  
  59.             </script>  
  60.         </div>  

 


原文地址:http://www.freejs.net/article_biaodan_804.html