I have 3 input boxes on a form.
Google Chrome offers autocomplete on them, so if you click on any of them, or start typing, you will see Chrome list of options, but as you move up and down among those autocomplete options, the 3 input boxes will get populated with the values, instead of the current textbox
http://jsfiddle.net/q3h2ydw1/1/
<form action="/" id="form1" method="post">
<input id="email_one" x-autocompletetype="email" />
<input id="email_two" x-autocompletetype="email" />
<input id="email_three" x-autocompletetype="email" />
</form>
The goal is getting Chrome's autocomplete to show the emails on the current input, and not the 3 of them.
UPDATE
I tried it in a fresh computer. I didn't use any autocomplete tag, just raw input boxes:
<form action="/" id="form1" method="post">
<input id="four" />
<input id="five" />
<input id="six" />
<input type="submit" value="go" />
</form>
http://jsfiddle.net/q3h2ydw1/7/
After every submit, whatever you enter there gets stored, so you have autocomplete on following trips. Also, the autocomplete is scoped to the current textbox.
I think the issue I was experiencing initially was more than just auto complete, maybe auto-fill. While I was browsing through the options on one of the input boxes, all the other textboxes were getting filled as well. The solution is just giving the input-boxes a fresh new ID, like the last fiddle, initially the auto-complete history for that input will be lost, but with following form-post trips, a new autocomplete history will be created for them.