Bootstrap Tokenfield show empty tags list. Laravel App

Question

I have a problem with autocomplete.

Firslty I get an array with tags:

  var tagsList = @json(\App\Helpers\Clients::getTags());

And then:

    $('#tags').tokenfield({
         beautify:false,
         autocomplete: {
              source: [tagsList],
              delay: 100
         },
        showAutocompleteOnFocus: true
     });

This code works correctly. No errors in console. But show the list of tags empty!

If I change tagList by static list, work correctly:

   $('#tokenfield').tokenfield({
       autocomplete: {
       source: ['red','blue','green','yellow','violet'],
       delay: 100
       },
      showAutocompleteOnFocus: true
      });

Console debug show the list correctly:

But in app only show this (repeat, no errors console):

Looks like css doesnt work but every css is linked correctly.

Any idea what is happenning?¿

console.log(tagsList) throw:

Best regards.

Answer 1

tokenfields source attribute needs an array, but you are passing an object to it.

The problem is that you do not have a sequential array so @json cannot convert it to an array but instead converts it to an object.

Solution 1

Convert the output from \App\Helpers\Clients::getTags() to a sequential array.

Solution 2

get the object values in JS and pass it to source

$('#tags').tokenfield({
    beautify:false,
    autocomplete: {
        source: Object.values(tagsList),
        delay: 100
    },
    showAutocompleteOnFocus: true
});

Answer 2

@Joaquin

How about you only use array to your source property?

   $('#tokenfield').tokenfield({
        autocomplete: {
        source: Object.values(taglist),
        delay: 100
       },
      showAutocompleteOnFocus: true
   });