How to implement autocomplete for iOS using Javasctipt?

Question

I want to auto complete with a list I've defined as i start typing. I figured out how to pull and search the list easy enough but getting the user to select the choices provided (iPhone only) is giving me hell.

I tried using datalists but that was a dead end and i'm about to just program it from scratch...

Before I do, I'm wondering if there's something out there that will work for this or if i need to do it all myself. I really like this idea from this post but for a from input.

I could implement the above using a new div to overlay the screen and move the text input to the top when the user types two or more characters and populate a scrollable div with some list items that will redirect back with an onclick.

Answer 1

Have you tried the jQuery UI Autocomplete ? It uses a tag behind so you don't have to worry if you use it in a form.

It the input it generates is meesing with the posted data, you can try two things:

1. On submit, call a custom AJAX request with your data (collect data in an object from all the input elements, except the generated ones)

2. On submit intercept the event, prevent it, destroy the widget and call another submit on the form (it reverts the html to the original one, without the extra inputs)