覆盖 Selectize 下拉列表中的默认选择

Question

我最近修改了一个网页，用 Selectize 单个项目 Select 替换了对用户不友好的搜索控件。

但我有点 UI 烦恼。当您单击控件然后尝试输入新的选择时，没有任何反应；它仍然具有默认选项。您首先必须按退格键删除默认选择，然后然后您可以输入新的搜索。

如何让键入立即覆盖默认选项，而无需按退格键？

这里有一个简短的 HTML 例子来说明这个问题：

<!DOCTYPE html>
<html>
   <head>
      <title>Selectize Example</title>
      <link rel="stylesheet" href="Selectize/css/selectize.css">
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script type="text/javascript" src="Selectize/js/standalone/selectize.js" type="text/javascript"></script>
   </head>
   <body>
      <select name="Manufacturer" id="Manufacturer" class="selectize">
          <option value="ALL" selected>All Manufacturers</option>
          <option value="1">Acme Corp.</option>
          <option value="2">Contoso Ltd.</option>
          <option value="3">Electronic, Inc.</option>
      </select>
      <script type="text/javascript">
         $(".selectize").selectize({create: false})
      </script>
   </body>
</html>

Answer 1

我是在旅途中做的，它确实需要改进，但至少它按预期工作。

编辑您的 javascript 如下：

$(".selectize").selectize({
    create: false,
    onDropdownOpen: function(dropdown) {
        var that = $(dropdown).prev().find('.item');

        // If the default option is selected, we empty the div acting as input.
        if(that.data('value') == 'ALL') {
            that.html('');
        }
    },
    onDropdownClose: function(dropdown) {
        var that = $(dropdown).prev().find('.item');

        // If nothing was selected, we restore initial value
        if(that.data('value') == 'ALL') {
            that.html('All Manifacturers');
        }
    },
});

我也做了一点 jsfiddle，check it。

这是不言自明的，无论如何它会在下拉列表出现时检查所选的值，然后在下拉列表消失时再次检查并仅在所选值为默认值时才执行逻辑。

Answer 2

就在最近，我使用了 selectize.js v0.12.2（使用 Django 表单和初始 select 选项是从该表单设置的）并且有一个非常相似的问题： select 框始终将第一个选项作为默认的 selected 选项，并始终在初始化时显示默认的 selected 选项。然后，对于单项 select，这并不重要，因为当我们 select 另一个选项时，默认选项将消失，但是对于多项 select，这是一个烦恼我们必须按退格键才能删除默认的 selected 选项。

我找到了解决方案：在脚本中设置 items:null：

$(".selectize").selectize({
  create: false,
  maxItems: 3,
  plugins: ['remove_button'],
  items: null,
  delimiter: ',',
  persist: false,
});

顺便说一句，你可以设置 selectize 占位符，例如直接在 html 文件中设置： <select name="Manufacturer" id="Manufacturer" class="selectize" placeholder="Select a manufacturer..."> 。只要没有 selected 选项，就会显示该占位符文本。

希望这对遇到类似问题的人有所帮助。

覆盖 Selectize 下拉列表中的默认选择

Overwriting default selection in Selectize dropdown list

jquery

html

selectize.js