Chips input

[thomasluce]

Hello all,

I'm trying to figure out about more options for the te-data-chips-init usage based on the documentation here: https://tailwind-elements.com/docs/standard/components/chips/

When I create an empty chips input, the label/placeholder is always "Example label", which I would like to change. I was also wondering if there are events that are fired that I can grab for when changes are made? Like, when a new chip is added, or one is removed or edited? I was digging through the code in the repo and can't follow it to anything that is helping me out.

If anyone can point me in the right direction, it would be very helpful. Cheers!

[juujisai]

Hi!

You can change the default "Example label" in two ways:

1. by using data attributes: data-te-label-text="New label name"
2. by changing the default options while initializing the compoment: new ChipsInput(myChips, { labelText: "New label name" })

Checkout all the events that are emitted for ChipsInput (and other cool infos) in our API section:
https://tailwind-elements.com/docs/standard/components/chips/#docsTabsAPI

You can use them like this:

const myChips = document.getElementById('my-chips');

myChips.addEventListener('add.te.chips', () => {
  console.log('new chip added');
});

Best Regards!

[memiljamel]

Hi @juujisai, can you answer this question? https://stackoverflow.com/questions/77117507/how-to-get-the-values-of-chips-in-tailwind-elements. I faced a similar problem to send value for HTTP POST method.

[juujisai]

Hello! You can create an array of chip elements that are inside the your chipsInput. Something like that:

  const chipsElement = document.querySelector("#chips-initial");
  let chipsList = [];
  chipsElement.querySelectorAll("[data-te-chip-init]").forEach((item) => {
    chipsList.push(item.textContent.trim());
  });

Call it when it's time to send a post request.

[memiljamel]

I mean sending using the form tag with the POST method. or a way to pass a name (e.g. name="some-name") to the input form so I can retrieve the value.

For example in Laravel:

$data = new Data();
$data->first = $request->input('first');
...
$data->save();

[juujisai]

Can you assign or call a method inside the POST method? Maybe you could add the way I posted before inside the JS and then try to call it with your POST method? I am not sure if that would work though.