Typeahead和Laravel不返回任何结果

Question

我正在尝试设置Typeahead.js，以用作Laravel应用程序上的自动提示功能。 不幸的是，每次都没有返回结果。

我事先返回了数据以利用本地存储，因此在我的实例中没有查询数据库的信息。

路线：

Route::get('/', function () {
    return view('welcome', ['treatments' => Treatment::orderBy('treatment')
        ->pluck('treatment', 'id')]);
});

欢迎查看：

const treatments = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: '{{$treatments}}'
  });

  $('#bloodhound').typeahead({
      hint: true,
      highlight: true,
      minLength: 1
    },
    {
      name: 'treatments',
      source: treatments,

      templates: {
        empty: [
          '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'
        ],
        header: [
          '<div class="list-group search-results-dropdown">'
        ]

      }
    }).on('typeahead:selected', function (evt, item) {
    $('#bloodhound').text(item.id);
  });

输入栏位：

<input type="search" name="treatment" id="bloodhound" class="form-control" 
        placeholder="Find a treatment" autocomplete="off" required>

$treatments数组的输出：

local: '{"2":"Treatment 1"}'

脚本的最后一部分应在输入字段中输入选择的值（ID），但不幸的是，这也不起作用。

非常感谢。

Answer 1

您对local: '{"2":"Treatment 1"}'字符串local: '{"2":"Treatment 1"}'感到陌生吗？

首先，它是通过htmlspecialchars发送的，所有报价都变成了&quote; ，第二-价值local是一个字符串。 您是否认为，提前输入可以理解您在这里拥有的东西？

解决方案：从数据库中获取元素并以json编码输出。 为避免引号转义，请使用{!! !!} {!! !!} ：

const treatments = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: {!! $treatments !!}
});

路线：

Route::get('/', function () {
    return view(
        'welcome', 
        ['treatments' => Treatment::orderBy('treatment')->pluck('treatment', 'id')->toJson()]
    );
});