没有文本时隐藏下拉值

Question

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

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();}}
   });
});

Answer 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>

没有文本时隐藏下拉值

Hide dropdown values when no text

javascript

jquery

selectize.js