Javascript laravel | Typeahead:如何组合db字段进行显示并获取所选记录的id?
我试图在我的laravel 5.4项目中实现自动完成功能,到目前为止,我只成功地显示了一个db字段的名字。这是密码 路线 控制器 看法 所以我有两个问题,我想知道两件事: 到目前为止,上述代码仅将first_name显示为自动完成建议 我希望它们的格式为id-first_name last_name 我还想从autocomplete中获取所选的用户id,以便以action/home/customer/{$id}的形式传递它Javascript laravel | Typeahead:如何组合db字段进行显示并获取所选记录的id?,javascript,jquery,laravel,typeahead.js,laravel-5.4,Javascript,Jquery,Laravel,Typeahead.js,Laravel 5.4,我试图在我的laravel 5.4项目中实现自动完成功能,到目前为止,我只成功地显示了一个db字段的名字。这是密码 路线 控制器 看法 所以我有两个问题,我想知道两件事: 到目前为止,上述代码仅将first_name显示为自动完成建议 我希望它们的格式为id-first_name last_name 我还想从autocomplete中获取所选的用户id,以便以action/home/customer/{$id}的形式传递它 我不熟悉javascript和jquery,所以我还不知道如何做到这一点
我不熟悉javascript和jquery,所以我还不知道如何做到这一点。请帮助我您只获取第一个\u名称的原因是因为您只选择第一个名称,选择第一个\u名称作为名称,从查询中删除选择,您将返回一个包含所有字段的集合 e、 g 然后在javascript回调中,数据将访问找到的每个记录及其字段 编辑 使用Typeahead,您可以定义回调,以便使用返回的数据,例如:
$('input.typeahead').typeahead({
source: {
groupName: {
// Ajax Request
ajax: {
url: "{{ route('autocomplete') }}"
}
}
},
callback: {
onResult: function (node, query, result, resultCount, resultCountPerGroup) {
console.log(node, query, result, resultCount, resultCountPerGroup);
}
}
});
我已经尝试过了,但是如果我将查询更改为选择所有字段,我没有得到任何建议,这里浏览器控制台错误bootstrap3 typeahead.min.js:1 Uncaught TypeError:b.toLowerCase不是b.matcher bootstrap3 typeahead.min.js:1在bootstrap3 typeahead.min.js:1在function.grep jquery.js:753在b.process bootstrap3 typeahead.min.js:1在proxy jquery.js:818在Object.success客户:5125在i jquery.min.js:2在Object.fireWith[as resolveWith]jquery.min.js:2在y jquery.min.js:4在XMLHttpRequest.c我已经更新了我的答案,试图帮助您解决问题。我尝试在我的函数中使用回调,但现在没有得到任何建议。
public function autocomplete(Request $request)
{
$data = customer::select("first_name as name")->where("first_name","LIKE","%{$request->input('query')}%")->orderBy('first_name')->take(6)->get();
return response()->json($data);
}
<form method="POST" action="/home/customer/{{$id}}">
{{ csrf_field() }}
<div class="input-group input-medium " style="float: right; padding-top: 3px; padding-right: 15px; ">
<input type="text" class="typeahead form-control" required>
<span class="input-group-btn">
<button class="btn green-haze" type="submit"> <i class="fa fa-search"></i></button>
</span>
</form>
//js
<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get(path, { query: query }, function (data) {
return process(data);
});
}
});
</script>
$data = customer::where("first_name","LIKE","%{$request->input('query')}%")->orderBy('first_name')->take(6)->get();
$('input.typeahead').typeahead({
source: {
groupName: {
// Ajax Request
ajax: {
url: "{{ route('autocomplete') }}"
}
}
},
callback: {
onResult: function (node, query, result, resultCount, resultCountPerGroup) {
console.log(node, query, result, resultCount, resultCountPerGroup);
}
}
});