Quiero mi función de búsqueda cuando el usuario deja de escribir, porque al escribir, la búsqueda se realiza para cada carácter. Para ese problema, la búsqueda está tomando mucho tiempo. Así que quiero que cuando el usuario deje de escribir, se iniciará la función de búsqueda. Mi código de búsqueda actual:
function search(){ var searchKey = $('#search').val(); if(searchKey.length > 3){ $('body').addClass("typed-search-box-shown"); $('.typed-search-box').removeClass('d-none'); $('.search-preloader').removeClass('d-none'); $.post('{{ route('search.ajax') }}', { _token: AIZ.data.csrf, search:searchKey}, function(data){ if(data == '0'){ // $('.typed-search-box').addClass('d-none'); $('#search-content').html(null); $('.typed-search-box .search-nothing').removeClass('d-none').html('Sorry, nothing found for <strong>"'+searchKey+'"</strong>'); $('.search-preloader').addClass('d-none'); } else{ $('.typed-search-box .search-nothing').addClass('d-none').html(null); $('#search-content').html(data); $('.search-preloader').addClass('d-none'); } }); } else { $('.typed-search-box').addClass('d-none'); $('body').removeClass("typed-search-box-shown"); } }Aquí hay una versión de su función de búsqueda sin rebotes (y reescrita, con objetos jQuery almacenados en caché, async/await en lugar de una función de devolución de llamada, etc.).
Básicamente, en keyUp llama a searchDebounced() , que luego llamará a la search() 500 ms más tarde, a menos que se presione una nueva tecla, lo que restablece el tiempo de espera y espera 500 ms adicionales:
const $search = $('#search'), $searchContent = $('#search-content'), $body = $("body"), $typedSearchBox = $('.typed-search-box'), $searchPreloader = $('.search-preloader'), $searchNothing = $('.typed-search-box .search-nothing'); let debounceTimeout = null function searchDebounced() { const searchKey = $search.val().trim(); if (searchKey.length < 4) { $typedSearchBox.addClass('d-none'); $body.removeClass("typed-search-box-shown"); return; } // These two lines do the debouncing work clearTimeout(debounceTimeout); debounceTimeout = setTimeout( search, 500 ); } async function search() { $body.addClass("typed-search-box-shown"); $typedSearchBox.removeClass('d-none'); $searchPreloader.removeClass('d-none'); const data = await $.post('{{ route(' + search.ajax + ') }}', { // No idea what this route is, I'm assuming it makes sense somehow _token: AIZ.data.csrf, search: searchKey }) if (data == '0') { $searchContent.html(null); $searchNothing.removeClass('d-none').html('Sorry, nothing found for <strong>"' + searchKey + '"</strong>'); } else { $searchContent.html(data); $searchNothing.addClass('d-none').html(null); } $searchPreloader.addClass('d-none'); }