CODEWITHSUNDEEP
bootstrap-multiselect
Gotts
Gotts

Reputation: 2454

bootstrap multiselect adding custom text input

I am trying to add a text box as one of the options because I am using the multiselect as a filtering element on a separate list. I want the text box to act as a free text filter. I have tried many things but cant get this to work...

I tried enabledHTML and inserted the input box in the option however although the textbox shows it is disabled (i cant enter any text - it seems to be blocked by a parent element but I cant figure out which one)

I tried to hijack the textbox that shows up when using enableFiltering. The problem is I cant seem to disable the event which causes filtering on the list when i enter text into the textbox. I dont want that filtering to happen, just want the text to remain in the textbox ideally with a checkbox next to it and then I can handle my list filtering by referencing the textbox value.

Can anyone advise how to do this?

Upvotes: 0

Views: 4016

Answers (2)

helenatxu
helenatxu

Reputation: 127

Ok, so this is what works for me. In order to stop propagation you need to call call just after the multiselect is initialized or rebuilt. Otherwise, the selector won't work and it won't stop the propagation.

You can checkout this Fiddle for a live version.

My code, example taken from de Docs (for live working version check the 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>

Upvotes: 0

Gotts
Gotts

Reputation: 2454

Figured it out. There's an onchange event called on all inputs in the dropdown. Blocking propogation allows me to make use of it. So enabled HTML, added the input text box as an option. And then bound a change event to that text box and stopped propagation. Now I can use it.

Upvotes: -1

Related Questions