Bootstrap 令牌字段显示空标签列表。 Laravel 应用程序

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 都已正确链接。

知道发生了什么事吗？¿

console.log(tagsList) 抛出：

此致。

Answer 1

@华金

你只对你的源使用数组怎么样？属性？

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

Answer 2

tokenfields source 属性需要一个数组，但您正在向它传递一个对象。

问题是您没有顺序数组，因此 @json 无法将其转换为数组，而是将其转换为对象。

解决方案 1

将 \App\Helpers\Clients::getTags() 的输出转换为顺序数组。

解决方案 2

获取JS中的对象值并传递给source

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

Bootstrap 令牌字段显示空标签列表。 Laravel 应用程序

Bootstrap Tokenfield show empty tags list. Laravel App

json

laravel

jquery-ui-autocomplete

bootstrap-tokenfield