即使不匹配也会返回所有结果，并延迟ajax
我的搜索存在问题。
问题1目前，如果我输入的字段正在搜索，但是搜索永远不会停止，所以如果我输入hello，它会在一分钟内发出大约500次请求。
问题2
我正在电影表中查找匹配的“标题”，以及在业务表中查找与business_id对应的业务名称。
问题3
每次发出请求时，它都会再次返回母版页，即加载所有js和css（这可能是为什么它会发出如此多的请求？），但如果我不扩展母版，结果刀片不起作用。
然而，即使我输入'e'，它也会让我回到'没有'e'的星系守护者'。我的想法是，它也在某种程度上搜索着经营桌。 他们都具有雄辩的一对一关系
控制器：
public function cinema_search($cinema_value) {
$cinema_text = $cinema_value;
if ($cinema_text==NULL) {
$data = Film::all();
} else {
$data = Film::where('title', 'LIKE', '%'.$cinema_text.'%')->with('business')->get();
}
return view('cinemasearch')->with('results',$data);
}
形成：：
<form id="cinema_display">
<div class="form-group">
<input type="text" class="form-control" id="search_cinemas" onkeyup="search_cinema(this.value);" placeholder="Search film">
</div>
<div id="show"
</div>
</div>
</form>
AJAX：
function search_cinema(cinema_value) {
$.ajax({
url: '/cinemasearch/' + cinema_value,
type: 'post',
dataType: 'html',
success: function(data) {
$('#show').append(data);
$('.se-pre-con').fadeOut('slow', function () {
$(".container").css({ opacity: 1.0 });
});
},
error: function(data) {
},
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
}
});
}
cinemasearch.blade（结果）：
@extends('master') @section('title', 'Live Oldham') @section('content')
@section('content')
<table style="width:100%">
@if (isset($results) && count($results) > 0)
@foreach( $results as $film )
<tr>
<td>{{ $film->business->name }}</td>
<td>{{ $film->title }}</td>
<td>{{ $film->times}}</td>
</tr>
@endforeach
@endif
</table>
@endsection
function search_data(search_value) {
$.ajax({
url: '/searching/' + search_value,
type: 'post',
dataType: 'html',
success: function(data) {
$('#show_search_result').append(data);
$('.se-pre-con').fadeOut('slow', function () {
$(".container").css({ opacity: 1.0 });
});
},
error: function(data) {
$('body').html(data);
},
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
}
});
}
function tram_stops(tram_value) {
$.ajax({
url: '/tramsearch/' + tram_value,
type: 'post',
dataType: 'html',
success: function(data) {
$("#display").html(data);
var tram_value = tram_value;
},
error: function(data) {
},
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
}
});
}
/*
setInterval(tram_stops, (30 * 1000));
*/
function search_cinema(cinema_value) {
$.ajax({
url: '/cinemasearch/' + cinema_value,
type: 'post',
dataType: 'html',
success: function(data) {
var items = JSON.parse(data);
var showElement = $('#show');
showElement.html('');
$.each(data, function() {
showElement.append(this.title +' '+ this.times+'<br />');
});
},
error: function(data) {
},
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
}
});
}
您正在从cinema_search返回错误的响应类型。 Ajax需要一个JsonResponse，而不是视图助手返回的是IlluminateHttpResponse 。 将您的搜索结果放入：
return response()->json(['results' => $data]);
如果你只是想要数据开始。 如果您想实际返回呈现的视图文件，则需要执行以下操作：
return response()->json(['results' => view('cinemasearch')->with('results',$data)->render()]);
然后将其注入到DOM中。 渲染服务器端的问题不是绑定客户端，所以如果你有任何需要JS的交互，你需要在你的成功回调中手动创建这些。
问题1：删除html中的keyUp事件并在Jquery中添加一个事件。
您的HTML结构不正确
这个：
<form id="cinema_display">
<div class="form-group">
<input type="text" class="form-control" id="search_cinemas" onkeyup="search_cinema(this.value);" placeholder="Search film">
</div>
<div id="show"
</div>
</div>
</form>
应该：
<form id="cinema_display">
<div class="form-group">
<input type="text" class="form-control" id="search_cinemas" onkeyup="search_cinema(this.value);" placeholder="Search film">
<div id="show">
</div>
</div>
</form>
然后再次考虑删除onkeyup事件。 并改变添加它在Jquery中是这样的：
问题2和3：我会推荐一个原始的查询并返回一个json而不是一个视图。 而且你不应该检查if($cinema_text === NULL)这不会是这种情况。 除非你把NULL放在你的url中，即使这样它将是一个String而不是NULL ， if('NULL' === NULL)返回false看看这篇文章的==和===的差异。
public function cinema_search($cinema_value) {
$cinema_text = $cinema_value;
if (empty($cinema_text)) {
$data = Film::all();
} else {
$data = DB::select('*')
->from('films')
->join('businesses', 'businesses.id', '=', 'films.business_id')
->where('films.title', 'LIKE', '%'.$cinema_text.'%')
->orWhere('bussiness.title', 'LIKE', '%'.$cinema_text.'%')
->get();
}
return response()->json(['results' => $data]);
}
然后在你的JavaScript中做这样的事情：
$( document ).ready(function() {
console.log( "ready!" );
$( "#search_cinemas" ).change(function() {
search_cinema(this.value);
console.log( "New value"+this.value+"!" );
});
function search_cinema(cinema_value) {
console.log('setup ajax');
$.ajax({
url: '/cinemasearch/' + cinema_value,
type: 'post',
success: function(data) {
console.log('success!');
var showElement = $('#show');
showElement.html('');
$.each(items, function() {
showElement.append(this.title +' '+ this.times+'<br />');
});
},
error: function(data) {
console.log(data);
},
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
}
});
}
});
上一篇: returning all results even if no match and make delay to ajax