Add tags from autocomplete

Topic: Add tags from autocomplete

Milan Lesichkov free asked 6 years ago

I want to add tags like on the example show in the JavaScript usage at: https://mdbootstrap.com/components/badges/ However instead of free type, I would like the user to select from the available tags from an auto compete: https://mdbootstrap.com/components/bootstrap-autocomplete/ How can this be achieved?

Add comment

Milan Lesichkov free answered 6 years ago

1 0 Best answer

I am already doing this but its not good enough:

Its missing the label functionality, when you click and label goes up
Tags can be added even if not in the autocomplete
Autocomplete does not support mouse up and down

I think this should be an input widget of its own.

Bartłomiej Malanowski staff commented 6 years ago

Currently, there's no a better way to achieve autocomplete and chips combined

Kelly Garvy pro commented 5 years ago

@milan did you find a workaround for the above functionality? I am also looking for the same thing. thanks

Kelly Garvy pro commented 5 years ago

@milan did you find a workaround for the above functionality? I am also looking for the same thing. thanks

Jakub Strebeyko staff commented 5 years ago

The functionality has no wide-spread support. The hotfix presented here is just a mix of the two already existent components and as such is rather undone. These are all fair points, @Milan Lesichkov:

The chips input itself, which is a markup basis for this solution, has no label functionality.
Tags can be added, as the chips inputs do not impose any kind of guards

I am not sure what you mean by point three, I mean clicks obviously work. Keyboard support, perhaps?

With Best Regards,Kuba

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

<p>Hi there Milam,</p>
<p>Welcome to the support board! You can easily achieve this by combining the examples of <a href="https://mdbootstrap.com/components/badges/#javascript-usage">chips</a> and <a href="https://mdbootstrap.com/components/bootstrap-autocomplete/">autocomplete</a> in your JavaScript file, that is</p>
<p>0. introduce the necessary HTML: </p>
<pre><code><div class="chips chips-placeholder"></div></code></pre>
<p>1. declare the chips names, i.e.:</p>
<pre><code>var chips = [
    "hot",
    "cold",
    "awesome",
    ...
];</code></pre>
<p>2. fire the chip function, which enhances the <code><div class="chips-placeholder"></code> with an input;</p>
<pre><code>$('.chips-placeholder').material_chip({
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
});</code></pre>
<p>3. initialize autocomplete on the dynamically created input, i.e.:</p>
<pre><code>$('[placeholder="+Tag"]').mdb_autocomplete({
    data: chips
});</code></pre>
<p>Some fiddling in these function would also allow automatically focusing onto the input field and firing the <code>.material_chip()</code> after selecting chips.</p>
<p>With Best Regards,<br />
Kuba</p>

Please insert min. 20 characters.

Hi there Milam,

Welcome to the support board! You can easily achieve this by combining the examples of chips and autocomplete in your JavaScript file, that is

0. introduce the necessary HTML:

<div class="chips chips-placeholder"></div>

1. declare the chips names, i.e.:

var chips = [
    "hot",
    "cold",
    "awesome",
    ...
];

2. fire the chip function, which enhances the <div class="chips-placeholder"> with an input;

$('.chips-placeholder').material_chip({
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
});

3. initialize autocomplete on the dynamically created input, i.e.:

$('[placeholder="+Tag"]').mdb_autocomplete({
    data: chips
});

Some fiddling in these function would also allow automatically focusing onto the input field and firing the .material_chip() after selecting chips.

With Best Regards,
Kuba

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Milan Lesichkov

12Support score
1Questions 1Answers 0Snippets