Question

我正在使用较旧的JQuery Autocomplete插件（此处显示的插件 - http://view.jquery.com/trunk/plugins/autocomplete/demo/）。它旨在用于移动应用程序。该插件在桌面浏览器中运行良好。但是，在移动设备上，自动完成建议的插件列表看起来非常非常小，根本不可读。

我试图在CSS中使用font-size和line-height的“em”值。而且，我已经在CSS中添加了这个 -

@viewport {
  width: device-width;
}

但没有运气！：（

我的移动应用广告已经有了meta-view，其余的页面都很好。

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

因此，JQuery插件似乎正在工作，因为如果我设法点击其中一个小行 - 我在我的文本字段中获得了正确的值。但是，自动完成列表太小而无法读取，我无法找到正确的CSS来实现这一点。任何指针/建议将非常感谢！

TIA， - Manish

Answer 1

您可能需要为移动设备单独定义css属性。例如：

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

Answer 2

我现在已经修好了。这是一个相当微妙的问题，在解决问题时并不明显。我确实挖了很多东西并用CSS做了很多，包括@sandeep在这里提到的一些建议。但是，没有一个工作 - 在每个＆lt; li＆gt;的css中使用硬编码的“height”属性。 JQuery div的元素，我设法为JQuery自动完成列表创建更大的行 - 但仍然没有显示这些行的内容。但是，当我点击行时 - 正确的值将在文本框中替换。这令人费解，并建议AppleWebKit浏览器可能无法渲染内容。

服务器上的JQuery自动完成列表有3000+＆lt; option＆gt;其中的元素（我们需要为用户提供不同的文本和一些后端的短代码），AppleWebKit浏览器拒绝将它们显示为JQuery自动完成行（Firefox可以显示它们没有问题），所以最后我写了小JS代码对于 JQuery formatItem函数 -

        //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＆amp; amp;测试了它iPhone（我们的目标设备）发现它在两者上都很棒！

解决!! ： - ）

JQuery Autocomplete（较旧的插件）列表在移动设备上显得非常小

2 个答案: