没有文本时隐藏下拉值答案

【问题标题】：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>

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

【问题讨论】：

标签： javascript jquery selectize.js

【解决方案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>

【讨论】：