0

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);
            }
        });
Pierre
  • 11
  • 4
  • 1
    Does this answer your question? [jQuery: keyup event for mobile device](https://stackoverflow.com/questions/38989559/jquery-keyup-event-for-mobile-device) – James May 05 '22 at 12:35
  • for mobile devices you have to use touch events (touchstart,touchmove,touchend , touchcancel) – Иван Яковлев May 05 '22 at 12:56
  • thanks guy, I tried both solutions, none of them is working, it looks like my custom js is not loaded on small screen – Pierre May 05 '22 at 14:07

0 Answers0