HTML5 datalist autocomplete dropdown not working on iOS

Question

I see this question, which is similar, but looks like no one was able to answer it.

I decided to implement an autocomplete dropdown with the HTML5 datalist, because I have about 1,000 items I'd like mobile users to be able to start typing and narrow the list down. Seems to work great on my Android, but on iOS no options come up at all.

Is this a known issue? I can't seem to find much info on it. I am thinking I will be looking hard for a screen position error (e.g., maybe the options are coming up off to the side of the screen area for some reason), but I'm baffled what else would cause this.

Here's the HTML:

 <p>School 1</p>
 <input type="text" id="input1" name="school" list="dlSchool1" class="collegeListInput" placeholder="Type a school's name..." />
 <datalist id="dlSchool1">
 <asp:Repeater ID="rpMobile" runat="server">
 <ItemTemplate>
 <option value="<%# Eval("SchoolName")%>"><%# Eval("SchoolName")%></option>
 </ItemTemplate>
 </asp:Repeater>
 </datalist>

And some CSS:

.collegeListInput {
 width: 225px;
 margin-top: 20px;
}

In JQuery I do some stuff on the focusout event.

That's about it. Thanks in advance for any advice / resources. I'm on hour 14 of the workday, so be gentle if this is a really dumb question.

Answer 1

The datalist is not supported on iOS yet (note to visitors from the future, as of Oct 6, 2014 the current version of iOS is 8.0.2).

Can I Use - Datalist

• opalenzuela: Note that this is partially because of the interface limitations (on iOS, a text field will open the screen keyboard, in the place where the item data list should appear). Both things cannot coexist without massive redesign.