CreativeBulma / bulma-tagsinput

Bulma's extension providing user interface to manage tags supporting autocomplete.
MIT License
62 stars 21 forks source link

Allow autocomplete to be suggestion #13

Open drake7707 opened 4 years ago

drake7707 commented 4 years ago

Currently freeInput doubles as search filter for the dropdown but the user can't add their own tags anymore once a source is initialized. I'd like the dropdown to show tags that are already available but still allow the user to create new tags.

Currently I'm doing a workaround by adding a link in the no results label that adds the current search text but it's not great

    new BulmaTagsInput(document.getElementById("tags"), {
        freeInput: true,
        allowDuplicates: false,
        caseSensitive: false,
        itemValue: "value",
        itemText: "name",

        noResultsLabel: "No results, <a class='lnkAddCurrentTag'>add current search text</a>",
        source: [{ name: "work", value: "work" },  { name: "school", value: "school" } ]
    });
    $(document).on("click", ".lnkAddCurrentTag", null, () => {
        var tags = <any>$("#tags").get(0);
        var searchText = tags.BulmaTagsInput().input.value;
        tags.BulmaTagsInput().add({ name: searchText, value: searchText });
        $(tags.BulmaTagsInput().container).removeClass("is-active");
        tags.BulmaTagsInput().input.value = "";
    });
drake7707 commented 3 years ago

I found a better solution, by adding a datalist with id="null" next to the tag it will suggest those entries during freeInput.