[英]Select2 show result but can't select
我正在使用 Laravel 8 構建一個 CRM 項目。我想使用select2
但出現問題。 在第一個 select 之后,我不能 select。 看起來像這樣,我不能 select。
HTML:
<div class="form-row">
<div class="col-md-12">
<div class="position-relative ">
<label for="gondericiAdi">Göndericinin Adı:</label>
</div>
<div class="input-group">
<select class="form-control" name="" style="width:100%;" id="gondericiAdi">
</select>
</div>
</div>
</div>
Javascript:
$('#gondericiAdi').select2({
ajax: {
url: "/MainCargo/GetCurrents",
type: "post",
dataType: 'json',
delay: 1000,
data: function (params) {
return {
_token: token,
currentSearchTerm: params.term, // search term,
page: params.page || 1
};
},
processResults: function (response) {
return {
results: response
};
},
cache: true,
theme: "bootstrap4",
placeholder: "Select an option",
tags: true,
}
});
PHP:
public function getCurrents(Request $request)
{
$Currents = DB::table('currents')
->where('name', 'like', '%' . $request->currentSearchTerm . '%')
->distinct()
->get(['name as text', 'current_code as id']);
return response()->json($Currents, 200);
}
謝謝
我已經測試過了,它工作正常。這是代碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="form-row">
<div class="col-md-12">
<div class="position-relative ">
<label for="gondericiAdi">Göndericinin Adı:</label>
</div>
<div class="input-group">
<select class="form-control" name="" style="width:100%;" id="gondericiAdi">
</select>
</div>
</div>
</div>
</div>
</div>
<script>
$('#gondericiAdi').select2({
ajax: {
url: "/test",
type: "post",
dataType: 'json',
delay: 1000,
data: function (params) {
return {
"_token": "{{ csrf_token() }}",
currentSearchTerm: params.term, // search term,
page: params.page || 1
};
},
processResults: function (response) {
return {
results: response
};
},
cache: true,
theme: "bootstrap4",
placeholder: "Select an option",
tags: true,
}
});
</script>
</body>
</html>
Laravel側
if(request()->isMethod('POST')){
$Currents = DB::table('users')
->where('name', 'like', '%' . request()->currentSearchTerm . '%')
->get(['name as text', 'id']);
return response()->json($Currents, 200);
}
return view('welcome');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.