[英]Laravel display AJAX call JSON response
从AJAX调用返回了一些数据,无法在实时搜索页面上输出到屏幕
Laravel控制器看起来像
// Live Search
public function searching() {
$search_keyword = $_POST['search_keyword'];
$searchClients = DB::table('clients')->where('company', 'like', '%'.$search_keyword.'%')->get();
return response()->json($searchClients);
}
效果很好,数据又回来了,看起来像
0
:
{id: 58, company: "Havenkey Ltd", con: "2441", engaged: "n", industry: "", status: 27, location: 1444,…}
1
:
{id: 62, company: "V3 Recruitment Ltd", con: "", engaged: "n", industry: "", status: 27,…}
前端位于下方,带有搜索框和一个结果div以显示结果sin
<div class="col-lg-8" style="padding-top: 30px;">
<i class="fa fa-dashboard"></i> <a href="{{URL::asset('/')}}">Dashboard</a> / Search Clients
<div class="col-md-12">
<br>
<div class="col-md-6 col-md-offset-3">
<form>
<div class="form-group">
{{ csrf_field() }}
<label for="search">Search</label>
<input type="text" class="search_keyword" id="search" name="search" class="form-control" placeholder="Enter Clients Name">
</div>
</form>
<div id="result">
</div>
</div>
</div>
</div>
<div class="col-lg-2" style="padding-top: 30px;">
@include('partials.notepad')
</div>
和JS看起来像这样
$(".search_keyword").keyup(function () {
//setup before functions
var typingTimer; //timer identifier
var doneTypingInterval = 5000; //time in ms, 5 second for example
var $input = $('#search');
//on keyup, start the countdown
$input.on('keyup', function () {
clearTimeout(typingTimer);
typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
//on keydown, clear the countdown
$input.on('keydown', function () {
clearTimeout(typingTimer);
});
//user is "finished typing," do something
function doneTyping () {
$.ajax({
type: "POST",
url: "/searching",
data: dataString,
cache: false,
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
success: function (data) {
if(data){
console.log('Here');
$('#result').html('');
$('#result').append('<select id="res"></select>');
$.each(data, function(i,val) {
$(document).find('#res').append(
$("<option>").text(val.company).val(val.id)
)
});
}else {
alert('im not working');
}
}
});
}
return false;
});
因此,我要在此处实现的所有目标都是输出实时搜索结果,该结果会将公司名称附加到列表中,可以在单击时选择该列表
首先,我们只需要在用户完成键入操作后才启动ajax调用,这样就避免了为键入的每个字符启动ajax调用。因此,要实现此机制,
//setup before functions
var typingTimer; //timer identifier
var doneTypingInterval = 5000; //time in ms, 5 second for example
var $input = $('#myInput');
//on keyup, start the countdown
$input.on('keyup', function () {
clearTimeout(typingTimer);
typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
//on keydown, clear the countdown
$input.on('keydown', function () {
clearTimeout(typingTimer);
});
//user is "finished typing," do something
function doneTyping () {
//here we will call the ajax function.
}
在您的ajax调用中,更改success
回调,如下所述:
success: function (data) {
if(data){
console.log('Here');
$('#result').html('');
$('#result').append('<select id="res"></select>');
$.each(data, function(i,val) {
$(document).find('#res').append(
$("<option>").text(val.company).val(val.id);
});
});
}else {
alert('im not working');
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.