【发布时间】:2018-02-07 00:40:39
【问题描述】:
我尝试获取多个输入的搜索结果,并在用户没有为某些输入设置任何值的情况下生成语句以获取或忽略任何输入。
逻辑
用户将:
- 选择
category - 从
category中选择Subcategory - 从
products中选择Specification或brand或both子类
到目前为止,我所做的是从上面的逻辑中获取所有信息,我需要的是从该数据中搜索的功能。
代码
Form
<form action="{{route('finderfunction')}}" class="mt-20">
{{csrf_field()}}
<div class="col-md-3">
<label for="category_id">category</label>
<select name="category_id" class="form-control">
<option value="">Select Category</option>
@foreach($categories as $category)
<option value="{{$category->id}}">{{$category->title}}</option>
@endforeach
</select>
</div><!-- end col-md-3 -->
<div class="col-md-3">
<label for="subcategory_id">subcategory</label>
<select name="subcategory_id" class="form-control">
<option value="">Select Subcategory</option>
</select>
</div><!-- end col-md-3 -->
<div class="col-md-3">
<label for="specification_id">specifications</label>
<select name="specification_id" class="form-control">
<option value="">Select Specification</option>
</select>
</div><!-- end col-md-3 -->
<div class="col-md-3">
<label for="brand_id">brands</label>
<select name="brand_id" class="form-control">
<option value="">Select Brand</option>
</select>
</div><!-- end col-md-3 -->
<div class="row">
<div class="col-md-3 col-md-offset-9">
<button style="margin: 20px;" class="pull-right btn btn-info" type="submit">Find</button>
</div>
</div>
</form>
JavaScript
<!-- get subcategories -->
<script type="text/javascript">
$(document).ready(function() {
$('select[name="category_id"]').on('change', function() {
var categoryID = $(this).val();
if(categoryID) {
$.ajax({
url: '{{ url('getSubCategories') }}/'+encodeURI(categoryID),
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="subcategory_id"]').empty().append("<option value='' selected>Select</option>");
$.each(data, function(key, value) {
$('select[name="subcategory_id"]').append('<option value="'+ value['id'] +'">'+ value['title'] +'</option>');
});
}
});
}else{
$('select[name="subcategory_id"]').empty().append("<option value='' selected>Select</option>");
}
});
});
</script>
<!-- get specifications -->
<script type="text/javascript">
$(document).ready(function() {
$('select[name="subcategory_id"]').on('change', function() {
var subcategoryID = $(this).val();
if(subcategoryID) {
$.ajax({
url: '{{ url('getspecifications') }}/'+encodeURI(subcategoryID),
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="specification_id"]').empty().append("<option value='' selected>Select</option>");
$.each(data, function(key, value) {
$('select[name="specification_id"]').append(
"<option class='form-control' value='"+ value['id'] +"'>"+ value['title'] +"</option>");
});
}
});
}else{
$('select[name="specification_id"]').empty().append("<option value='' selected>Select</option>");
}
});
});
</script>
<!-- get brands -->
<script type="text/javascript">
$(document).ready(function() {
$('select[name="subcategory_id"]').on('change', function() {
var subcategoryID = $(this).val();
if(subcategoryID) {
$.ajax({
url: '{{ url('getbrands') }}/'+encodeURI(subcategoryID),
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="brand_id"]').empty().append("<option value='' selected>Select</option>");
$.each(data, function(key, value) {
$('select[name="brand_id"]').append('<option class="form-control" value="'+ value['id'] +'">'+ value['title'] +'</option>');
});
}
});
}else{
$('select[name="brand_id"]').empty().append("<option value='' selected>Select</option>");
}
});
});
</script>
截图:
Search function
很遗憾我没有任何搜索功能,that's why I asked here 需要帮助
public function finderfunction(Request $request) {
//
}
route
Route::any('/finder', 'frontend\SearchController@finderfunction')->name('finderfunction');
【问题讨论】:
-
您可以使用这对 laracast 中显示的干净解决方案:This one 和 the consecutive one。
-
我把它放在这里是因为我真的很累 RN 来帮助你编写代码,但是这些视频真的很清楚。 Jeff 使用这些过滤器类的方式很好。
标签: javascript php ajax laravel search