Question

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

我尝试了启用HTML并在选项中插入输入框但是文本框显示它已被禁用（我无法输入任何文本 - 它似乎被父元素阻止但我无法找出哪一个）

我试图劫持使用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 multiselect添加自定义文本输入

2 个答案: