Question

I am using older JQuery Autocomplete plug-in (the one shown here – http://view.jquery.com/trunk/plugins/autocomplete/demo/). It is intended to be used for a Mobile app. The plug-in works just fine in the desktop browser. However, on the mobile device the plug-in list of auto-complete suggestions appears very, very small and is not readable at all.

I have tried to use “em” values for font-size and line-height in the CSS. Moreover, I have added this in the CSS –

@viewport {
  width: device-width;
}

But no luck! 🙁

I already have meta-viewport for my mobile app ad rest of the pages are just fine.

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

As such, the JQuery plug-in seems to be working, because if I manage to click on one of those small rows – I am getting correct value in my text field. However, autocomplete list is too small to be readable and I am not able to figure out correct CSS to get this working. Any pointers/suggestions would be highly appreciated!

TIA,
– Manish

Answer 1

I have got it fixed now. It was rather subtle issue that was not obvious while fixing the problem. I did dig a lot and played a lot with CSS including some of the suggestions @sandeep mentioned here. However, none worked – with hard-coded “height” attribute in the css for each <li> element of JQuery div, I managed to make rows bigger for JQuery auto-complete list – but still the contents of those rows were not showing. However, when I tapped the row – correct value would be substituted in the text box. It was rather puzzling and suggested that probably the AppleWebKit browser was not rendering the contents.

The JQuery auto-complete list on the server had 3000+ <option> elements in it (we need different text for users and some short code for back-end), and AppleWebKit browser refused to show them as JQuery auto-complete rows (Firefox could show them without an issue), so finally I wrote small JS code for JQuery formatItem function –

        //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; 
    }

It extracts the label text of the option element and give it to JQuery auto-complete list. This fixed the problem and I am able to use JQuery auto-complete properly now on the mobile devices. I have tested it with Android & iPhone (our target devices) and found that it works great on both of them!

Solved!! 🙂