在输入 3 个字符之前，是否可以让 Selectize 不下拉？

Question

我正在使用 Selectize 搜索本地数组中的大量数据。

当用户单击 Selectize 元素时，它会立即打开并尝试显示完整列表。这是一些 3000 项目，必须立即通过我的自定义渲染。

我宁愿用户必须输入至少 3 个字符然后显示匹配项。

我知道有一个 "maxOptions" 设置，但是当用户点击时它仍然显示下拉菜单。这让他们感到困惑，因为现在我只显示 100 3000 选项。

如果可能的话，我也希望它在选择一个选项后不显示下拉列表（这是 maxItems = 1）。

注意：我尝试使用 openOnFocus=false 来尝试执行此操作，但它似乎只阻止了第一次点击打开下拉菜单。

关于如何防止 Selectize 在用户输入搜索时不打开的任何想法？

Answer 1

我修改了 'open' 函数并让它工作。

我在第一行之后添加了这一行：

var value = self.$control_input.val();

然后我将 value.length < 3 添加到导致打开被忽略的检查列表中。

完美运行。我不得不说这段代码是我有幸使用过的最干净的第 3 方代码javascript。

Answer 2

官方 examples 有其中之一，请参阅下面的演示，希望这就是您要找的

$('#select-words-length').selectize({
  create: true,
  createFilter: function(input) {
    return input.length >= parseInt($('#length').val(), 10);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.css" rel="stylesheet" />
<div id="wrapper">
  <h1>Selectize.js</h1>
  <div class="demo">
    <h2>Create Filter</h2>
    <p>Examples of how to filter created results.</p>

    <div class="control-group" style="margin-top:40px">
      <label for="length">Minimum Length</label>
      <input type="text" id="length" value="2"><br><br>
      <label for="select-words-length">Words:</label>
      <select id="select-words-length" multiple placeholder="Enter a word longer than the minimum number of characters..."></select>
    </div>

  </div>
</div>

Answer 3

根据 OP 自己的回答修改库中的 open() 可以防止下拉列表在所需字符数之前打开。但是，如果用户点击退格键来缩短搜索词，下拉菜单将保持打开状态。要解决此问题，请修改 onKeyDown() 函数中的 switch 语句：

case KEY_BACKSPACE:
  if (self.isOpen) {
    self.close();
  }
  return;

Answer 4

var no_of_char = 1;

function temp() {
  var $select = $(document.getElementById('model-select')).selectize({

    // ...
    // ...
    // ...

    openOnFocus: false
  });
  var selectize = $select[0].selectize;

  selectize.on('type', function(e) {
    if (selectize.$control_input.val().length < no_of_char) {
      selectize.close();
    }
  });
}

temp();

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://selectize.github.io/selectize.js/js/selectize.js"></script>
<link href="https://selectize.github.io/selectize.js/css/selectize.css" rel="stylesheet" />
<div id="main">
  <select id="model-select">
    <option></option>
    <option value="0">abc</option>
    <option value="1">abcxyz</option>
    <option value="2">abcmno</option>
    <option value="3">abcpqr</option>
  </select>
  <br>
</div>

在输入 3 个字符之前，是否可以让 Selectize 不下拉？

Is is possible to have Selectize not dropdown until there are 3 chars entered?

javascript

jquery

selectize.js