Bootstrap menu filter with multiple select and autofill box

Question

I use latest Bootstrap and I have multiple options with a select box. However, when you select 1 item, the whole thing closes, but I would like that you can multiple options and then the box closes. Is that possible to achieve?

Also, I have a search/autofill form that does not work. My idea was that when you enter "J", then automatically "Japan" would show up. Is that possible?

I prefer a Bootstrap internal solution if possible. jQuery only if there is no way to realise my ideas.

BOOTPLY here... BOOTPLY

Thanks.

<div class="btn-toolbar">
    <!--Default buttons with dropdown menu-->
    <div class="btn-group">
        <button class="btn btn-default" type="button">Country</button>
        <button class="btn btn-default dropdown-toggle"         data-toggle="dropdown" type="button"><span class="caret"></span></button>
        <div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
            <input class="form-control" placeholder="Search values" 

type="text">
            <div class="checkbox">
                <label><input value="" type="checkbox"> Austria</label>
            </div>
            <div class="checkbox">
                <label><input value="" type="checkbox"> Colombia
                </label>
            </div>
            <div class="checkbox">
                <label><input value="" type="checkbox"> Japan</label>
            </div>
        </div>
    </div></div>

It doesn't auto-close for me in FF if I choose the checkbox rather than the label. This is an awkward design choice though. Can you rethink the UI? — Tony, Nov 24 '15 at 22:52

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

A dropdown is meant to be "selectable", so if you don't want to close, you have to preventDefault() action when clicking on div/label (check this). Infact, if you just click the checkbox, you can select multiple choices.

As for the search/autofill, I would suggest you to check Select2 plugin, because I don't think Bootstrap has a something ready to use for such a custom html. And, as you are already including jQuery file, why don't you want to use it for a custom search fuction?

EDIT: I found this other SO answer that may help you https://stackoverflow.com/a/17907276/1151408

Bootstrap menu filter with multiple select and autofill box

1 Answers1