我正在尝试设置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)的值,但不幸的是,它也不起作用。
非常感谢。
答案 0 :(得分:0)
没有字符串local: '{"2":"Treatment 1"}'
对你来说很奇怪吗?
首先,它通过htmlspecialchars
发送,所有引号都变成"e;
,第二个 - local
的值是一个字符串。你认为,打字可以理解你在这里有什么吗?
解决方案:从元素中获取数据库并输出&#39; em json-encoded。为避免引用转义使用{!! !!}
:
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()]
);
});