Bootstrap Tokenfield показывает пустой список тегов. Laravel App

Question

У меня проблема с автозаполнением.

Во-первых, я получаю массив с тегами:

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

А затем:

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

Этот код работает правильно.Нет ошибок в консоли.Но покажите список тегов пустым!

Если я изменю tagList на статический список, все будет работать правильно:

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

Консольотладка показать список правильно:

Но в приложении только показать это (повтор, консоль без ошибок):

Похоже, css не работает, но каждый css связан правильно.

Есть идеи, что происходит? Throw

console.log (tagsList) throw:

С уважением.

Answer 1

Атрибут

tokenfields source требует массива, но вы передаете ему объект.

Проблема в том, что у вас нет последовательного массива, поэтому @json не может преобразовать его в массив, а вместо этогопреобразует его в объект.

Решение 1

Преобразование вывода из \App\Helpers\Clients::getTags() в последовательный массив.

Решение 2

получить значения объекта в JS и передать его в source

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

Answer 2

@ Joaquin

Как насчет использования массива только для вашего исходного свойства?

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