Блог

Я использую более старый плагин автозаполнения jQuery (тот, который показан здесь — http://view.jquery.com/trunk/plugins/autocomplete/demo /). Он предназначен для использования в мобильном приложении. Плагин отлично работает в браузере на рабочем столе. Однако на мобильном устройстве список предложений автозаполнения плагина выглядит очень, очень маленьким и вообще не читается.

Я попытался использовать значения «em» для размера шрифта и высоты строки в CSS. Более того, я добавил это в CSS —

 @viewport {
  width: device-width;
}
 

Но не повезло! 🙁

У меня уже есть мета-окно просмотра для моего объявления в мобильном приложении, с остальными страницами все в порядке.

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 

Таким образом, плагин jQuery, похоже, работает, потому что, если мне удастся щелкнуть по одной из этих маленьких строк, я получаю правильное значение в своем текстовом поле. Однако список автозаполнения слишком мал для чтения, и я не могу найти правильный CSS, чтобы заставить это работать. Любые указания / предложения будут высоко оценены!

TIA, — Manish

Возможно, вам нужно определить свойство css отдельно для мобильного устройства. Например :

 @media all and (max-devide-width: 480px){
    .head{  
       width:200px;
           height:50px;
     } 
} 
 

Теперь я это исправил. Это была довольно тонкая проблема, которая не была очевидна при устранении проблемы. Я много копал и много играл с CSS, включая некоторые из предложений, упомянутых здесь @sandeep . Однако ничего не сработало — с помощью жестко заданного атрибута «height» в css для каждого элемента <li> jQuery div мне удалось увеличить строки для списка автозаполнения jQuery, но все равно содержимое этих строк не отображалось. Однако, когда я нажал на строку — правильное значение будет подставлено в текстовое поле. Это было довольно загадочно и предполагало, что, вероятно, браузер AppleWebKit не отображал содержимое.

Список автозаполнения jQuery на сервере содержал более 3000 элементов <option> (нам нужен другой текст для пользователей и немного короткого кода для серверной части), а браузер AppleWebKit отказался показывать их как строки автозаполнения jQuery (Firefox мог показывать их без проблем), так что, наконец,Я написал небольшой JS-код для функции форматирования jQuery —

         //needed as option list is not shown by AppleWebKit safari browser
    formatItem: function(item, position, length, search){
        var name ="";       
        var str = ""   item;            
        var start = str.indexOf('">')   '">'.length;
        var end = str.lastIndexOf("</");
        name = str.substring(start,end);
        return name; 
    }
 

Он извлекает текст метки элемента option и передает его в список автозаполнения jQuery. Это устранило проблему, и теперь я могу правильно использовать автозаполнение jQuery на мобильных устройствах. Я протестировал его на Android и iPhone (наших целевых устройствах) и обнаружил, что он отлично работает на них обоих!

Решаемая !! 🙂