Using datalist for autocomplete

- [Instructor] In this chapter we're going to examine some of the techniques for helping users enter form data efficiently. And we're going to start with the data list element. One of the easiest ways to help users fill in form fields is to use a set of predetermined values such as a drop menu of text strings for a text input. By creating this kind of user experience used to require a third party library like jQuery UI or some fancy JavaScripting. The introduction of the data list element made this a lot easier and it can be used with a variety of form controls not just text fields. So let's open up the datalist_start file. And I'm going to go ahead and bring this up in the browser. And in this case I'm going to use Chrome because not all browsers support data lists on a large variety of input fields just yet but Chrome seems to be the best at the moment so we'll use that for our demonstration. So you can see that this is a collection of different form controls. I'm going to use this to demonstrate how the data list works with each type. Now using the data list is pretty straightforward so let's go back to the code and try it out. All right, so here are my code I'm going to scroll down to my data list section here. And I'm going to create a data list element and I'll give it an ID called text data. And then data lists are populated with options the same way that select lists are and each value is what will show up in the list. So I'll give this one a variety of text strings and I'll make a few of these here so John, Jane and Jim. Then, to attach a data list to a particular form element the list attribute is set to the ID value for the list you want to use. So for this text field, I'll just simply say list equals and then I'll just give it text data and that's pretty much it all there is to it. So let's save this and then go back to the browser and now you can see that when I hover over the field I get this little drop menu item. Now, not all browsers have the same user experience but when I click in the field you can see that I get a drop menu of the values I specified in the data list. Now, it's still an editable text field I'm not limited to those values. But if there's a set of values that I know are going to be common I can just give those to the user in the form of this drop list. Okay, but data lists work with lots of different kinds of data so let's go back to the code and add a few more. So I'll add a data list (keyboard clicks) then it's going to have some URLs in it and I'll call this one URL data and once again, I'll put in some options so caniuse.com and let's make some copies and let's see, this one will be Google and this one will be Yahoo and how about, YouTube. All right, and then let's make another data list. Let's make a data list for date values (keyboard clicks) so (keyboard clicks) and I'll give this one an ID of date data and let's put in some options let's see. I'll just put in some random dates here and once again let's see. How about (keyboard clicks) (mouse clicks) got some of these (keyboard clicks) and last one, we'll make this one August 11th okay, and once again let's attach these to the fields so I'll have this list be URL data and then for the dates, I'll have this list be date data. All right, so let's save that and then let's go try these out in the browser. All right, and so once again all right, now I've got my list of URLs okay, that's working pretty good, my name is still there and now for the date picker (mouse clicks) notice that when I click on the date (mouse clicks) fields they still work normally right, so I can still do things like use arrow keys but when I click on the date icon I get the date values that I put into the data list (mouse clicks) and if I want to have the regular calendar experience I can just click on Other and now, now I get the regular experience. Here we go, click on Today. Okay. So data lists work even for color choosers and numeric fields so let's make those our last examples. So one more time back to the code and I'll add two more data lists and I'll call this one number data (keyboard clicks) and I'll put in some values all right and we'll make that 150, 100 and 200, and 500 and then one more and I'll give this one an ID of color data (keyboard clatters) and I'll put in some color values in so (keyboard clatters) so I'll do red and then green, and then blue. All right, and then one more time on those respective fields so this one right here will be the color data and then the range is going to be the number data. So once again let's save and then back to the browser and now let's see. So here on the yep, sure enough I'm getting my predefined colors in my data list and of course I can choose Other to get the better color choosing experience and you can see here that on the numeric slider now the data lists is being used to create these tick marks on the slider. So data lists are a great way to help users enter common predefined values and you don't even have to resort to using a third party UI library.