Aradığın böyle birşey herhalde.
Ben N11 Kategori eşleştirme işlemi için aşağıdaki şekilde uyguladım. 2 Harf yazdıgında otomatık sorgu gonderır ve arama sonuclarını ceker.
Gereken JS Kutuphaneleri : <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
JS Kodu : $(document).ready(function () {
$('#arama_yapılacak_olan_input_id_si').autocomplete({
source: function (request, response) {
var csrf = "{{ csrf_token() }}";
$.ajax({
type: "POST",
url: "{{ route('n11.categories.search') }}",
dataType: "json",
data: {
_token: csrf,
search: request.term
},
success: function (data) {
response(data);
}
});
},
minLength: 2,
select: function (event, ui) {
$('#arama_yapılacak_olan_input_id_si').val(ui.item.label); // Seçim Yaptıdında ekranda gorunmesı ıcın
$('#input_id').val(ui.item.value); // ben form post ettıgım ıcın gizli inputlara verdiğim değerler için açılan inputlara value ataması
$('#input_id').val(ui.item.label); // ben form post ettıgım ıcın gizli inputlara verdiğim değerler için açılan inputlara value ataması
return false;
},
});
});HTML KODU <input type="text" class="form-control form-control-lg" id="arama_yapılacak_olan_input_id_si " placeholder="">
PHP KODU $name = $request->search;
$service = \DB::table($this->getN11CategoryLevel6TableName())->where('name','like','%'.$name .'%')->get(); //Laravel Sorgusu bu sen kendı sorgununu bu mantıkla yaz.
$response = [];
foreach ($service as $category)
$response[] = ['label' => $category->name, 'value' => $category ->category_id]; // ben name ve id değeri döndürüyorum. Sen name ve url dondurerek url gıtmesını saglayabılırsın
return response()->json($response); // json çevirerek geri döndürüyorsunÖRNEK Çalışma :