没有文本时隐藏下拉值

Posted 2023-03-24

【中文标题】没有文本时隐藏下拉值

【英文标题】：Hide dropdown values when no text

【发布时间】：2021-10-31 22:13:58

【问题描述】：

如果搜索中没有文本，我希望隐藏下拉值。下面的代码就像单选的魅力。当允许选择多个值时，它会在用户第一次选择后自动显示所有下拉值。

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.js"></script>

<select multiple class="form-control select-key" id="sel2" name="key-list[]">
  <option>SBI Cap</option>
  <option>PGIM MidCap</option>
  <option>Axis SmallCap</option>
  <option>Kotak Technology</option>
  <option>SBI Technology</option>
</select>

JS

$(function () 
   $("#sel2").selectize(
   onDropdownOpen: function($dropdown) if (!this.lastQuery.length) this.close(); this.settings.openOnFocus = false;,   
  onType : function (str) if (str === "") this.close();
   );
);

【参考方案1】：

添加项目后下拉菜单保持打开状态。用户添加条目后关闭即可。

$(function () 
   $("#sel2").selectize(
    onDropdownOpen: function($dropdown) 
        if (!this.lastQuery.length) 
        this.close(); 
        this.settings.openOnFocus = false;
      
   ,   
   onItemAdd: function() 
    this.close();
   ,
   onType : function (str) 
        if (str === "") 
            this.close();
        
   
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.js"></script>

<select multiple class="form-control select-key" id="sel2" name="key-list[]">
  <option>SBI Cap</option>
  <option>PGIM MidCap</option>
  <option>Axis SmallCap</option>
  <option>Kotak Technology</option>
  <option>SBI Technology</option>
</select>