我在 Laravel 中有一個編輯頁面，其中有多個使用 foreach 顯示的資料產品，我想使用 ajax 自動完成產品的名稱，但它不起作用。但我沒有收到任何錯誤訊息。
這是代碼
@foreach($product as $item){
<input type="text" name="product" id="product" value="{{ $item->name }}"/>
<input type="number" name="qty" id="qty" value="{{ $item->quantity }}"/>
<input type="number" name="price" id="price" value="{{ $item->price }}"/>
}
和腳本
$(document).ready(function(){
$('#product').autocomplete({
source: function(request, response){
console.log(request.term)
$.ajax({
url:"{{ route('autocompleteproduct')}}",
dataType: "json",
data: {
search: request.term
},
success: function(data){
response(data);
},error:function(){
alert('error');
}
});
},
select: function(event, ui){
$('#product').val(ui.item.label);
return false;
}
});
});
uj5u.com熱心網友回復：
正如我在我的評論中提到的，div 上的 ID 應該是唯一的，在這里，您將遍歷每個專案上都帶有“#product”ID 的垃圾郵件。使用一個類，或者更具體地使用每個產品的實際 ID
下面我從每個輸入中洗掉了 ID，因為您沒有使用它們不需要的任何標簽。我還將它們包裝在一個類中以回圈每個類，以便我們可以專門針對孩子
@foreach($product as $item)
<div class="product-inputs" id="product-{{ $item->id }}">
<input type="text" name="product" value="{{ $item->name }}">
<input type="number" name="qty" value="{{ $item->quantity }}">
<input type="number" name="price" value="{{ $item->price }}">
</div>
@endfor
$(document).ready(function(){
$('.product-inputs').each(function() {
var id = $(this).attr('id');
var input = $('#' id ' input[name=product]');
input.autocomplete({
source: function(request, response){
console.log(request.term)
$.ajax({
url:"{{ route('autocompleteproduct')}}",
dataType: "json",
data: {
search: request.term
},
success: function(data){
response(data);
},error:function(){
alert('error');
}
});
},
select: function(event, ui){
input.val(ui.item.label);
return false;
}
});
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/370779.html