bootstrap 多选添加自定义文本输入

Question

我正在尝试添加一个文本框作为选项之一，因为我在单独的列表中使用多选作为过滤元素。我希望文本框充当自由文本过滤器。我已经尝试了很多东西，但无法让它工作...

我尝试了 enabledHTML 并在选项中插入了输入框，但是尽管文本框显示它被禁用（我无法输入任何文本 - 它似乎被父元素阻止但我无法弄清楚是哪个）

我试图劫持使用 enableFiltering 时显示的文本框。问题是当我在文本框中输入文本时，我似乎无法禁用导致列表过滤的事件。我不希望发生这种过滤，只是希望文本理想地保留在文本框中，旁边有一个复选框，然后我可以通过引用文本框值来处理我的列表过滤。

谁能告诉我怎么做？

Answer 1

想通了。下拉列表中的所有输入都有一个 onchange 事件。阻止传播让我可以利用它。因此启用 HTML，添加了输入文本框作为选项。然后将更改事件绑定到该文本框并停止传播。现在可以用了

Answer 2

好的，这对我有用。为了停止传播，您需要在之后初始化或重建多选。否则，选择器将不起作用，也不会停止传播。

您可以结帐this Fiddle for a live version。

我的代码，示例取自 de Docs（实时工作版本请查看 Fiddle）：

$(function () { 
    
     const inputTemplateOptions = {
        enableHTML: true,
        templates: {
          li: '<li><a><label style="display:inline;"></label><input type="text" class="custom-input" /></a></li>'
        }
      };
    
     $('select[multiple]').each(function() {
          const config = Object.assign(
            {},
            inputTemplateOptions,
            $(this).data('multiselect-config')
            );

          $(this).multiselect(config); // here we initialized it with our config
          
          $( "input.custom-input" ).on( "click", function() {
            event.stopPropagation();
          });
        }); 
    });

<body>
  <select id="example-multiple-selected" multiple="multiple">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
  </select>
</body>

bootstrap 多选添加自定义文本输入

bootstrap multiselect adding custom text input

bootstrap-multiselect