Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Most browsers support some form of autocomplete for fields that you enter on a page. Let's take a working copy of dataset.html, and I am going to rename that to dataset-working, open that in my text editor, and we'll go ahead and open this in the browser as well. Open Firefox for this, and you'll notice I am just going to press the down arrow here in this Text 1 field, and you see I've already got a couple of different things in this in the past. And there they are, in my autocomplete list. aAd so if I just press the O letter, you see now I get the first one of them, and I can just select that and it will fill it in for me.
So if I type a few different things in here--I'll just type a three here and I'll type a four here and a five here and a seven here--and if I go back up here and type in something else--nine, foo, baz, blah, blah--now we've got a few different things in here and I am going to put my cursor up here on the URL Bar and press Enter, and that resets and reloads the whole page. Now when I press my down arrow there, I get a number of different options, and when I press my down arrow here, I get a number of different options on each of these.
So that's called auto-complete. Most browsers have some form of that available. If I come back in here to my HTML and in my form, I can come in here and I can say, for the entire form actually, autocomplete="off". If I save that and come over and reload, now you will notice I am pressing my down arrow and autocomplete is not on for any of these. On the other hand, I can do this just for one element if I want to. Let me do it just for the first one, save that and reload, and now you notice there is no autocomplete on the first one. I am pressing the down arrow.
If I go to the second one, I do have autocomplete, and the third one, I have autocomplete, just the first one that I don't. So I can do this for the whole form. I can do it just for a particular element. I can turn it off for the whole form if I want to, and I can turn it on for a particular element if I want to. So I will just turn it on for the second one, and it's off for everything else. I reload, it's off there. It's on here and it's off there and it's off there. It's also possible to pre-fill your own list of autocomplete options using HTML5's new datalist feature.
So you'll see I am taking out all of those autolist attributes, and you see down here I have this datalist, id="cats," and it has a bunch of options. And if I come up here in my first field or in any of my fields actually, I am going to say, list="cats" and cats is the id of the list that I want to use. So I save this and come back over to my browser, and I am going to do the whole reset thing by putting my cursor in the URL bar and press Enter. And now if I press by down arrow, you will notice that I have my autocomplete options up there at the top, but I also have these other options down here, which are the ones from my datalist.
And if I just start typing, you see it gives me some choices, and there they are. You notice that one of these options has a value inside the option, its contents in the option container, and I just want to talk about this briefly. This isn't a feature that has been implemented very much, but I've seen it in a few places and some of them actually do this. And I think it's a bad idea, for a couple of reasons. If I erase this and I come down here, let's just choose the one that says The Cat in the Hat, you will notice that the value that gets completed is the value here, Hat, not the whole text, Cat in the Hat.
And if I look at this in Chrome, you will see it gets implemented slightly differently. Press my down arrow there and you notice that it says hat on the left and it has Cat in the Hat a little bit lighter text. So at least it shows you that that's what's going on. But generally, it's a confusing option. The other problem with this is if you open this page in a browser that does not support the autocomplete feature--so I am going to close Firefox here and I am going to open it in an old version of Firefox that I have on this computer-- you'll notice that that Cat in the Hat text shows up at the bottom of my div.
And that's because it doesn't know what to do with any of this, and so it's just going to display any text that's inside of an element that it doesn't know what to do with. So I strongly suggest that you do not use that feature; just put your value in the value and leave your element empty, and be sure to have the closing option. This is actually in this context. It's optional and yet the page doesn't validate properly without it. So it doesn't hurt. It doesn't cost a lot to just type that, and most of the time we are going to be copying and pasting anyway.
So just have that closing option. So the way this works is you have a datalist element and it's a container and it contains options just like select does, and you want to put your autocomplete in your value attribute in each of the options. The id here corresponds with how you select it in your text field, list="cats", id="cats" and there you have it, and it works great. So the datalist feature is useful for preloading the autocomplete list for fields in a form.
This feature currently works in all the major browsers except Microsoft Internet Explorer.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101728 Viewers
61 Video lessons · 88489 Viewers
71 Video lessons · 72307 Viewers
56 Video lessons · 104022 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.