1

In my home page, there a search box that you can search for products. So when the user starts typing the product, there is an autosuggest.php that a jQuery starts looking for products. But the problem is that on Android devices, when then user touches the search box, the keyboard pops-up and then disappears again. This is my code snippet:

(function($){

$(function(){

    $('#search').keyup(function () {
        var term = $(this).val();            

        if(term.length >= 2){
            $.getJSON(cvg.urls.base_url + 'autosuggest.php', {term:term, store:cvg.store.id}, function(json){
                var ac = $('#search_autocomplete');
                var rh = $('<div class="autocomplete_header">').text(cvg__('FREQUENT TERMS'));
                var ch = $('<div class="autocomplete_header">').text(cvg__('CATEGORIES'));
                var ph = $('<div class="autocomplete_header">').text(cvg__('PRODUCTS'));

                if( typeof json.products != 'undefined' && json.products.length > 4)
                    var pa = $('<div class="autocomplete_header view_all">')
                        .html('<a href="' + cvg.urls.store_url + 'catalogsearch/result/?q=' + term + '">' + cvg__('VIEW ALL') + '</a>');


                if( typeof json.freq_resutls != 'undefined') {
                    var rc = $('<ul class="autocomplete_container sr_freq_terms">');
                    for (var i = 0; i < json.freq_resutls.length; i++){
                        var li = $('<li>');
                        var a  = $('<a>')
                            .attr('href', cvg.urls.store_url + 'catalogsearch/result/?q=' + json.freq_resutls[i])
                            .text(json.freq_resutls[i]);

                        li.html(a);

                        rc.append(li);
                    }
                }


                if( typeof json.category != 'undefined') {
                    var cc = $('<ul class="autocomplete_container sr_cats">');
                    for (var i = 0; i < json.category.length; i++){
                        var li  = $('<li>');
                        var spa = $('<span>').text(json.category[i].name);
                        var a   = $('<a>')
                            .attr('href', cvg.urls.store_url + json.category[i].url_key + '.html')
                            .append(spa);
                        li.append(a);

                        cc.append(li);
                    }
                }

                if( typeof json.products != 'undefined') {
                    var pc = $('<ul class="autocomplete_container sr_prods">');
                    for (var i = 0; i < json.products.length; i++){
                        var li  = $('<li>');
                        var img = $('<img>').attr('src', json.products[i].img);
                        var p   = $('<p>').html('<span class="sr_prods_name">'+json.products[i].value+'</span><br/>'+'<i>'+json.products[i].sku+'</i>'+'<br/>'+json.products[i].descr);
                        var a   = $('<a>')
                            .attr('href', json.products[i].url)
                            .append(img)
                            .append(p);
                        li.append(a);

                        pc.append(li);

                        if(i == 3)
                            break;
                    }
                }

                ac.html('').show();

                if( typeof json.freq_resutls != 'undefined') {
                    ac.append(rh);
                    ac.append(rc);
                }
                if( typeof json.category != 'undefined') {
                    ac.append(ch);
                    ac.append(cc);
                }
                if( typeof json.products != 'undefined') {
                    ac.append(ph);
                    ac.append(pc);
                    ac.append(pa);
                }
            });
        }

    });

});

})(jQuery)

Is there any part here that causes this problem ? Any help would be really appreciated.

5
  • Share your site link.
    – Vino
    Jul 20, 2017 at 13:05
  • It's: achilleasaccessories.gr/el
    – Stefanos
    Jul 20, 2017 at 13:24
  • Don't know if it's helpfull...
    – Stefanos
    Jul 20, 2017 at 13:43
  • let me check and update you
    – Vino
    Jul 20, 2017 at 14:04
  • Please try my below answer
    – Vino
    Jul 20, 2017 at 14:18

2 Answers 2

1

Please try this

$(document).on('keyup','#search', function() {
   // code
});

or

$(document).delegate('#search', 'keyup', function() {
    // code
});

Source from https://stackoverflow.com/questions/10580295/jquery-keyup-not-working-on-android

3
  • no... not working either... :-(
    – Stefanos
    Jul 20, 2017 at 14:32
  • just put this code and comment rest of the code then check alert $('#search').keyup(function() { alert('Handler for .keyup() called.'); });
    – Vino
    Jul 20, 2017 at 14:37
  • OK this one works.... IF I manage to make the keyboard stay.
    – Stefanos
    Jul 20, 2017 at 14:43
0

I turned out that I was looking at the wrong file. My search box was located in the header.phtml and the css class that was called was different. So the implementation only needed a jQuery focus:

$('.top-seaarch .quick-search').focus();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.