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()]
    );
});