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

dan04 发表于 Dev

丹04

我最近修改的网页，以取代与非人性化的搜索控制Selectize单项选择。

但是我有点UI烦恼。当您单击该控件，然后尝试键入一个新的选择时，什么也没有发生。它仍然具有默认选项。您首先必须按Backspace键删除默认选择，然后才能输入新搜索。

如何使键入立即覆盖默认选项，而不必按Backspace键？

这是一个简短的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>

phaberest

我在旅途中做到了，它肯定需要改进，但是至少它能按预期工作。

如下编辑您的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');
        }
    },
});