Typeahead和Laravel不返回任何結果

Question

我試圖設置Typeahead.js，用作我的Laravel應用程序的自動提示功能。不幸的是，它每次都沒有返回結果。

我事先返回數據以利用本地存儲，所以在我的實例中沒有查詢數據庫。

路線：

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

Welcome視圖：

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"}'對你來說顯得很陌生？

首先，它是通過htmlspecialchars發送並且所有報價變爲&quote;，第二個值是local是一個字符串。你認爲，鍵入可以理解你在這裏？

解決方案：讓您的元素形成數據庫和output'em 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()] 
    ); 
});