Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:10Length:50 minutes
Jui form 3
  • Overview
  • Transcript

2.2 jQuery UI Autocomplete Widget

The jQuery UI Autocomplete widget provides a simple way to create smart text fields. In this lesson, you’ll learn how to create a list of predefined strings that jQuery UI will use to autocomplete entries in a text field.

Related Links

2.2 jQuery UI Autocomplete Widget

Hello and welcome back. In this lesson, we're going to pick up where we left off and we're going to create a text field that has an auto complete feature applied to it. And what jQuery UI allows us to do with the auto complete feature is it allows us to make a list of strings. And then use those strings as kind of a suggestion tool for when you're entering in text in a text field. So let's see what that looks like. Let's say that for our form, we want maybe a category of job skills that somebody might be applying for. So I'm gonna create another div here with a class of UI widget and inside this div we're gonna create a new text field. So first of all, we're gonna create a label for it and let's call this text field Category. So we'll create this label for category and we're gonna call the label category. And then we'll create our input. So it's gonna be an input element with a type of text and we're gonna give it an id of category. So we're going to close that input field off and here we have our simple id field. Now we can add a class here to our input. And this class is specific to jQuery UI and it's called ui-corner-all and it will round the corners of our text field. Now I don't particularly like what it's doing with the thickness and color of our borders. So we can jump into CSS and fix that. So we can open up our CSS panel. And let's create a new rule for all inputs and let's go ahead and include select here as well. Even though the select currently looks okay, I'm gonna create a border here. It's gonna be one pixel solid and I'm to give it a color of c5c5c5 which is the shade of gray that jQuery UI usually uses for its borders. And I'm gonna give it a little padding as well. Maybe well, four pixels of padding and I'm gonna lighten up the color so that it's not black. I'm gonna change it to a dark gray, so #333 for the text color there and let's go ahead and give it a width of 100%. And that's going to widen up that category field there for us and we can move on from there. So we've created our input field and remember to go back to our HTML, we gave it a id of category. So we're gonna use that ID in our JavaScript. So we're gonna go inside our function here and first of all, we need to create a list of strings that we're gonna to use as suggestions for this particular text field. So I'm gonna create a variable here and let's call it availableCategories, you could just call it categories for short or whatever. Now whatever you wanna do there. So we create an array by putting opening and closing square brackets there, let's go and put a semi-colon at the end of that statement. Then before the closing square bracket, I'm gonna hit Enter to skip a couple of lines. And then inside those square brackets, we're just gonna put a list of strings, and these are gonna be potential skill categories for job hunters. So we might have JavaScript jQuery and others. So I'm gonna paste the rest of my list here. We have HTML, CSS, jQuery UI, web design and front-end development. So these are gonna be our suggestions for this category input field. So whenever somebody starts typing, if they use some of these starting letters, they'll see these suggestions pop up. Now in order to make this work, we've got to activate that input field as a auto complete field for jQuery UI. So we'll skip a couple of lines after our location selectMenu. And now we're gonna point to this new input field we've created, which has an ID of category. So in our jQuery selector, we're gonna put quotation marks and then #category which is the ID name we gave to that input field. And we're gonna say .autocomplete. So that will initially activate the autocomplete feature but it doesn't know what suggestions to use. We need to tell it what suggestions to use using a property called Source. And so when you're using jQuery UI and you want to apply properties to one of these widgets. Those properties need to be inside an object and you create an object in JavaScript by using curly brackets. So we have our opening and closing curly brackets there, I'm gonna nudge that closing curly bracket down. And put a semi-colon at the end of that statement, so I don't forget to do it later. And then inside the curly brackets here, we're going to create a property called Source. And we're going to point to that available categories list that we created a second ago. So our source is going to be this list of categories and that's all we need to do to get this to function. So now if we come over here to our input field and we start typing in JavaScript, we just type in the letter J. It will give us all of the suggestions for things that begin with a J or have a J in them. Notice, they don't have to start with a J. If we typed in a U for example, it has jQuery and jQuery UI cuz they both have Us in it. Now keep in mind, you don't have to type in one of these items that's in the dropdown list. You can type in whatever you want to. But this just kind of gives you suggestions and you use the up and down arrows and hit Enter if you want to select one of them. So that's how you use the Autocomplete feature of jQuery UI. Again, you can always go to the jQuery UI website to find more options for how that feature works. Thank you for watching and I'll see you in the next lesson.

Back to the top