ajax - Ajax 自动完成功能在 Laravel 6 中无法正常工作
问题描述
我看到了关于 AJAX 自动完成的教程,它看起来不错,但问题是它还显示了所有数据,而不是我正在搜索的数据。
抱歉,我是 ajax 新手,你能帮我解决这个问题吗?
从我的控制器
public function search(Request $request){
// check if ajax request is coming or not
if($request->ajax()) {
// select country name from database
$data = Vendor::where('vendor_id', 'LIKE', '%'.$request->vendor_id.'%')
->get();
// declare an empty array for output
$output = '';
// if searched countries count is larager than zero
if (count($data)>0) {
// concatenate output to the array
$output = '<ul class="list-group" style="display: block; position: relative; z-index: 1">';
// loop through the result array
foreach ($data as $row){
// concatenate output to the array
$output .= '<li class="list-group-item">'.$row->vendor_id. ' ' .$row->vendor_name.'</li>';
}
// end of output
$output .= '</ul>';
}
else {
// if there's no matching results according to the input
$output .= '<li class="list-group-item">'.'No results'.'</li>';
}
// return output result array
return $output;
}
}
我的刀片
<div class="row">
<div class="col-lg-12"></div>
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="vendor_id" id="vendor_id" data-type="vendor_id" placeholder="Enter vendor ID" class="form-control autocomplete_txt">
{{-- <input class="typeahead form-control" type="text"> --}}
</div>
<div id="vendor_list"></div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="vendor_name" id="vendor_name" placeholder="Vendor Name" class="form-control" readonly="true">
</div>
</div>
<div class="col-lg-12"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript">
// jQuery wait till the page is fullt loaded
$(document).ready(function () {
// keyup function looks at the keys typed on the search box
$('#vendor_id').on('keyup',function() {
// the text typed in the input field is assigned to a variable
var query = $(this).val();
// call to an ajax function
$.ajax({
// assign a controller function to perform search action - route name is search
url:"{{ route('admin.search') }}",
// since we are getting data methos is assigned as GET
type:"GET",
// data are sent the server
data:{'vendor':query},
// if search is succcessfully done, this callback function is called
success:function (data) {
// print the search results in the div called vendor_list(id)
$('#vendor_list').html(data);
}
})
// end of ajax call
});
// initiate a click function on each search result
$(document).on('click', 'li', function(){
// declare the value in the input field to a variable
var value = $(this).text();
// assign the value to the search box
$('#vendor_id').val(value);
// after click is done, search results segment is made empty
$('#vendor_list').html("");
});
});
</script>
路线
Route::get('search', 'PurchasedOrderController@search')->name('search');
您能帮我修复下拉列表并在此点击代码触发后在供应商名称输入字段上显示供应商名称吗?提前非常感谢你!!!
解决方案
对我来说,您的问题来自您的控制器,您也需要发布请求,或者留在 get 中并这样做。
控制器
public function search(Request $request, $vendor){
// check if ajax request is coming or not
if($request->ajax()) {
// select country name from database
$data = Vendor::where('vendor_id', 'LIKE', '%'.$vendor.'%')
->get();
// declare an empty array for output
$output = '';
// if searched countries count is larager than zero
if (count($data)>0) {
// concatenate output to the array
$output = '<ul class="list-group" style="display: block; position: relative; z-index: 1">';
// loop through the result array
foreach ($data as $row){
// concatenate output to the array
$output .= '<li class="list-group-item">'.$row->vendor_id. ' ' .$row->vendor_name.'</li>';
}
// end of output
$output .= '</ul>';
}
else {
// if there's no matching results according to the input
$output .= '<li class="list-group-item">'.'No results'.'</li>';
}
// return output result array
return $output;
}}
你的路线
Route::get('search/{vendor}', 'PurchasedOrderController@search')->name('search');
你的刀片
$(document).ready(function () {
// keyup function looks at the keys typed on the search box
$('#vendor_id').on('keyup',function() {
// the text typed in the input field is assigned to a variable
var query = $(this).val();
// call to an ajax function
$.ajax({
url:"yourdomain.com/search/"+query,
// since we are getting data methos is assigned as GET
type:"GET",
// if search is succcessfully done, this callback function is called
success:function (data) {
// print the search results in the div called vendor_list(id)
$('#vendor_list').html(data);
}
})
// end of ajax call
});
它应该可以工作,也不是在帖子中你必须在你的控制器中更改$request->vendor_id
它不好,更改$request->vendor
并在帖子中传递你的路由 laravel 和 ajax 请求,它应该可以工作
对于点击:
$('#list-group-item').on('click', function(){
var item_select = $(this).text();
$('#vendor_id').val(item_select);
$('#vendor_list').html("");
});
推荐阅读
- sockets - OCaml 刷新奇怪的行为(退出所有线程)
- python - 将烧瓶应用程序数据传递给其他 python 脚本
- azure - 为服务主体授予管理员同意
- javascript - 我不能在 javascipt 中使用这个正则表达式来拆分 '(' 的字符
- typescript - TypeScript:不确定我是否正确输入了这个返回承诺的函数
- c - 如何从C中的数组中删除重复元素
- r - 带有 .csv 文件的 ggplot2 中的条形图
- sql - 将 Sql 转换为 MonogoDb
- python - 为什么 Tkinter getvar() 返回 Booleanvar 的字符串类型?
- php - 如何将数据批量插入具有相同数据字段名称的 MySQL 数据库表中?