Semantic ui dropdown, prevent auto select with input element

Question

I added an option to the dropdown that allows user to add item if it doesn't exist.

For that matter, I added an input field to the dropdown but when the user enters something, the dropdown tries to match the entered text with items that are already in the list.

I find it quite annoying in that specific case. I have noticed in the docs that input elements are bound to the search function. Nevertheless, I couldn't find how to disable this behaviour.

Here's the HTML:

<div class="ui fluid selection dropdown playlist">
    <input name="playlist" type="hidden">
    <i class="dropdown icon"></i>

    <div class="default text">playlist</div>

    <div class="menu">
        <div class="item create" data-value="0">
            <span class="create-placeholder">+ new playlist</span>

            <div class="ui action input add-playlist">
                <input placeholder="new playlist">
                <button class="ui button">Add</button>
            </div>
        </div>

        <div class="item" data-value="1">foo</div>
        <div class="item" data-value="2">bar</div>
        <div class="item" data-value="3">baz</div>
    </div>
</div>

The .add-playlist div and its content are not shown but I'm willing to spare you with the CSS here.

And the js:

$dropdown = $('.ui.dropdown');

$dropdown.dropdown({
    action: (text, val) => {
        if (val == 0) { // eslint-disable-line
            $('.create-placeholder').hide(100);
            $('.add-playlist').css('display', 'inline-flex');
            $('.add-playlist input, .add-playlist button').show(200);
        }

        else $dropdown.dropdown('set selected', val).dropdown('hide');
    },
    onHide: () => {
        // do that after dropdown has been hidden
        setTimeout(() => {
            $('.add-playlist, .add-playlist input, .add-playlist button').hide();
            $('.create-placeholder').show();
        }, 400);
    }
});

I've set up a fiddle to have a clear exemple. Just type "foo" and you'll see what I mean in case it's not crystal clear.

The dropdown module has some native functionality for user added items. See Tagging and User Additions. — Goran Mottram
– Goran Mottram, Commented Mar 28, 2017 at 22:17
Thx @GoranMottram, I had seen it but the way it works doesn't cover my need… This is at the sametime a searchbar and a way of adding items. That's no what I'm looking for. At that point, I'd just like to undind search from the input field :) — Buzut
– Buzut, Commented Mar 29, 2017 at 6:29

Yassine Sedrani · Accepted Answer · 2017-03-30 12:29:59Z

0

To allow user to add new items just add allowAdditions: True To dropdown options, for more informtions see semantic-ui dropdown settings

Example:

$('dropdownSelector').dropdown({ allowAdditions: True }).dropdown();

answered Mar 30, 2017 at 12:29

Yassine Sedrani

7946 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Semantic ui dropdown, prevent auto select with input element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related