Мобильная клавиатура исчезает в окне поиска в Magento
На моей домашней странице есть окно поиска, в котором вы можете искать товары. Поэтому, когда пользователь начинает вводить продукт, появляется autosuggest.php что jQuery начинает искать продукты. Но проблема в том, что на устройствах Android, когда пользователь прикасается к окну поиска, клавиатура появляется, а затем снова исчезает. Это мой фрагмент кода:
(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)
Есть ли здесь какая-либо часть, которая вызывает эту проблему? Любая помощь будет очень признательна.
2 answers
Пожалуйста, попробуйте это
$(document).on('keyup','#search', function() {
// code
});
Или
$(document).delegate('#search', 'keyup', function() {
// code
});
Источник из https://stackoverflow.com/questions/10580295/jquery-keyup-not-working-on-android
Оказалось, что я смотрел не на тот файл. Мое поле поиска находилось в заголовке.phtml, и класс css, который был вызван, был другим. Таким образом, для реализации требовался только фокус jQuery:
$('.top-seaarch .quick-search').focus();