Metronic şablonunda bulunan demo üzerindeki quick search özelliğini kullanmak için kodu kopyaladım.
Kendi koduma dahil ettim ajax ile input'a değer girildkten sonra LDAP sorgusu attırıyorum.
Demo üzerinde bulunan "No result found" alanı rastgele bir şekilde tetikleniyor.
Nerede tetikliyor çözemedim büyük ihtimalle javascript üzerinde bir bölümden dolayı tetikleniyor.
Kaynak kodlarım ve soruna dair tam videoya aşağıdan ulaşabilirsiniz;
Soruna ait video: https://streamable.com/2z5z7j
HTML Bölümü:
<!--begin::Menu-->
<div data-kt-search-element="content" class="menu menu-sub menu-sub-dropdown py-7 px-7 overflow-hidden w-300px w-md-350px">
<!--begin::Wrapper-->
<div data-kt-search-element="wrapper">
<!--begin::Recently viewed-->
<div data-kt-search-element="results" class="d-none">
<!--begin::Items-->
<div class="scroll-y mh-200px mh-lg-350px">
<!--begin::Category title-->
<h3 class="fs-5 text-muted m-0 pb-5" data-kt-search-element="category-title">Arama Sonuçları</h3>
<!--end::Category title-->
<div id="rehberHizliAra"></div>
</div>
<!--end::Items-->
</div>
<!--end::Recently viewed-->
<!--begin::Recently viewed-->
<div class="" data-kt-search-element="main">
<!--begin::Heading-->
<div class="d-flex flex-stack fw-semibold mb-4">
<!--begin::Label-->
<span class="text-muted fs-6 me-2">Geçmiş Aramalar</span>
<!--end::Label-->
</div>
<!--end::Heading-->
</div>
<!--end::Recently viewed-->
<!--begin::Empty-->
<div data-kt-search-element="empty" class="text-center d-none">
<!--begin::Icon-->
<div class="pt-10 pb-10">
<i class="ki-duotone ki-search-list fs-4x opacity-50">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</i>
</div>
<!--end::Icon-->
<!--begin::Message-->
<div class="pb-15 fw-semibold">
<h3 class="text-gray-600 fs-5 mb-2">No result found</h3>
<div class="text-muted fs-7">Please try again with a different query</div>
</div>
<!--end::Message-->
</div>
<!--end::Empty-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Menu-->
[B][/B]AJAX ile POST gönderdiğim bölüm: <script>
$(document).ready(function() {
$('input[name="search"]').on('input', function() {
var searchTerm = $(this).val();
$.ajax({
url: 'islemler/rehber/rehberHizliArama.php',
method: 'POST',
data: { search: searchTerm },
success: function(response) {
$('#rehberHizliAra').html(response);
}
});
});
});
</script>
[B][/B]