Hello I have a search function on my website that shows some result 1000ms after the last letter is triggered, or the search bar is clicked.
It works perfectly on my web browser, but on tablet and mobile, the JS is not loaded. I cannot see the event listener in the console.
Thank you for your help.
<div class="form-group custom_search">
<input class="form-control" type="search" name="q" id="gsearch" placeholder="Search" autocomplete="off" aria-label="Search" <?php if(!empty($search_for)){ echo 'value="'.$search_for.'"';} ?>
</div>
Here is my Js
var typingTimer; //timer identifier
var doneTypingInterval = 1000; //time in ms
$('#gsearch').on('keyup focus',function(){
clearTimeout(typingTimer);
if ($('#gsearch').val) {
typingTimer = setTimeout(function(){
$.ajax({
type: 'POST',
url: static_url+'deals/web_search',
async: false,
data: {search:$('#gsearch').val()},
success: function (result) {
var json = $.parseJSON(result);
if(json['merchants'] == ''){
$('.merchant_search').empty();
$('.merchant_search').hide();
}else{
var topmerchants = '<h4>Merchants <a href='+static_url+'shops'+' class="float-right">See More</a></h4><ul>';
$.each(json['merchants'], function(m,j){
topmerchants += '<li><a href="'+j.url+'"><img src="'+j.image+'" loading="lazy">'+j.name+'<span>'+j.deals+' hot deals</span></a></li>';
});
topmerchants += '</ul>';
$('.merchant_search').show();
$('.merchant_search').empty();
$('.merchant_search').append(topmerchants);
}
if(json['subgroups'] == ''){
$('.subgroups_search').empty();
$('.subgroups_search').hide();
}else{
var tosubgroups = '<h4>Groups <a href='+static_url+'groups'+' class="float-right">See More</a></h4><ul>';
$.each(json['subgroups'], function(n,z){
tosubgroups += '<li><a href="'+z.url+'"><img src="'+z.image+'" loading="lazy">'+z.name+'<span>'+z.deals+' deals</span></a></li>';
});
tosubgroups += '</ul>';
$('.subgroups_search').show();
$('.subgroups_search').empty();
$('.subgroups_search').append(tosubgroups);
}
if(json['deals'] == ''){
$('.deals_search').empty();
$('.deals_search').hide();
}else{
var todeals = '<h4>Results</h4><ul>';
$.each(json['deals'], function(d,l){
todeals += '<li><a href="'+l.url+'"><img src="'+l.image+'" loading="lazy">'+'<span class="result_up">'+l.score+' ° </span> '+l.name+' <span class="result_down">AED '+l.price+'</span></a></li>';
});
todeals += '</ul>';
$('.deals_search').show();
$('.deals_search').empty();
$('.deals_search').append(todeals);
}
}
});
}, doneTypingInterval);
}
});