3.2 Textbox Auto-Completion
In this lesson, you’ll learn how to create a textbox that supports auto-completion.
1.Introduction2 lessons, 04:54
4.Conclusion1 lesson, 01:08
3.2 Textbox Auto-Completion
Hello, and welcome to lesson number 13 where we'll create a text box that supports auto completion. Now this can be used for lots and lots of different things. But, usually, auto completion is a feature that really helps out with the user experience. When it comes to filling in forms, right? So imagine you have to fill in your country and you start typing and it would be useful to immediately, as you type, get a list of countries that match whatever it is you typed. Well this is what we're going to create in this lesson. So here we have our text box currently doesn't do anything and coming back to the markup we see that it's very simple. It's an input type text in a form. It has an ID, a placeholder, and below that is a UL with an ID of autocomplete results. So this is the element that we're gonna populate with the various results we're going to get from auto completion. So let's start our scripts file by declaring a couple of variables. We're gonna get our actual input, we're gonna get the results and then we're gonna specify our country list and that's about it for now. So let's actually document our step here. Next up, we should focus the input when the page loads. So we say targetInput.focus. And that whenever we refresh now, the cursor is always in there. Next up, we have to add an EventListener for the keyup. So whenever we press a key into the input, we start comparing what we typed with what we have in our countries array. We're going to say targetInput.addEventListener on keyup. We execute the following function. Now before we move on. We're going to need some useful key codes here and these are 13 for Enter 38 arrow up 40 arrow down you'll see why we need these in just a little bit. Now we're going to start by doing this results Results.innerHTML now we'll reset this. So basically if there were results previously shown, we're gonna remove those. Next we're gonna hide the results element. And for that we're actually gonna write a function to which we can just pass in a parameter and it's gonna either show it or hide it. And the function is called toggleResults, and we're going to say hide. So let's go ahead and write that function. And that function looks something like this. So action is either show or hide. And if the action is show, then we're going to get the results, we're gonna add the class visible. Otherwise, if the action is hide, we're gonna remove the class of visible very, very simple. Now we're gonna say if this.value.length is higher than 0 then, so what exactly does this mean? Well this is an object and it refers to target input in this case. So when we're doing this targetInput.addEventListener, we can actually use this object to reference target input, and it allows us to write code more elegantly and more efficiently. So, if the value that we typed in that input has a length that's higher than zero. Which means if we type something basically, then we're going to do the following matches = to getMatches this.value. Now, we have two unknowns here, matches is actually a variable that we need to define and it's an array so matches = array. And getMatches is a function that we need to write and that function will actually compare the value that we just typed with all the items in the array. And it's gonna return an array of the items that match the value that we just typed. Maybe it sounds a bit confusing but if you take a close look to the code you'll see that it's actually very, very simple. So let's go ahead and write that get matches function. Now that function looks something like this. We're defining a match list array and then we're parsing the country list array, which means we're going in a loop, in a for loop, from zero to the last item. And then we're checking if the item toLowerCase, indexOf, inputText toLowerCase input text being this bit. So if the index of is different than minus one, which means if the value that we typed in the text box is contained within that particular item from the country array. Well in that case we're going to do matchList push that countryList. We're populating the match list array with that country's name and then we return match list. So now coming back here, we'll do this matches.length is higher than zero. Which means if we have some country names returned by our function, then we're going to say displayMatches, matches. Now displayMatches is a function that we're going to write now which will populate our autocomplete results. And then show it. So what we're doing here, basically, is we're doing a while loop and we're going through the entire match list array. Every single item will be appended as a list item with a class result to the results elements which in our case is this ul. Then what we do is we toggle the results like this or we show the results. So let's see if that works. Okay, let's do a, and you can already see that we have a few countries here. Albania, Colombia Cuba, pretty much all the countries that contain the letter a. If I do al it shows me all the countries that have a and l Albanian, Nepal, Wales and so on and if I do alb it just shows me Albania. Let's do another one let's do Nepal, let's do Romania, so as you can see the script works beautifully. Now what I want to do is to have a little bit more control over that list when using my keyboard so for example, I want to be able to move through my results with the up and down arrow keys. And then when I hit Enter I want to fill my text box with that value so let's make that happen. And we're gonna start right here in our display matches function. We're gonna say The first child gets class of "highlighted". And for this, we're gonna say moveCursor, or resultsCursor. Again, two unknowns. Now resultsCursor is a variable that we're gonna initialize here and that should be equal initially to 0. And moveCursor is a function that we're gonna write now. Now the moveCursor function will basically move that highlighted class up or down depending on which key I press. So what we're doing is basically we're going through all of our results. We're removing the class I've highlighted from all of them and we're adding that one only on our position. So now refresh, you can see that when I type something the cursor or the highlight is on the very first item. Now let's see what we can do about when we press the up and down arrow keys and the place to write that code is right here in the key up event listener. So here we're going to say if results class list contains visible, so if there are results that are being shown, then we're gonna do a switch. And a switch is a much more elegant form of writing multiple if else statements. So we're gonna do switch and the criteria is going to be event.keyCode and then we're gonna say case 13, we're gonna have our block of code and I don't. We're going to have break case 38 again block of code and then break and finally case 40 same deal. Okay now what this means basically is check the event.keyCode, if it's 13 execute the following, if it's 38 execute the following and the same goes for 40. Now this is where this comment comes in, we can see that 13 means Enter, in which case I want to copy or I want to fill in my text box with the value that I've just highlighted. 38 and 40 arrow up and respectively down. So in the case of an enter. I want to do the following, targetInput.value = results.children, resultsCursor innerHTML. Well results Is our UL. Children means each individual list item. Result cursor is the position that's highlighted and innerHTML basically means the text within that list item. That's all there is really, so we're taking this value and we're assigning it to the target input value. So let's see that in action. Let's see let's type Romania. If I hit enter you can see that the page refreshed there, and that's because this is a form. Pressing enter In that form, will automatically submit it and the page refreshes but we don't want that to prevent it. We're going to go right here and we're going to add event listener for the input keydown. So, we're going to say targetInput.addEventListener keydown function. And we're gonna say if event.keyCode = 13 or if we press enter we're gonna say event.preventDefault. And that if we type Romania again hit enter, for some reason it still doesn't work, so what's going on here? So addEventListener keydown, function, sorry. I forgot to include the event here. Okay, let's do a refresh. So Romania, hit Enter, and we now populate the text box. Let's do another test, Albania, enter, okay, but when I hit enter I want to actually hide this results element. So here we're going to say, toggleResults hide and also let's reset the cursor to 0. Okay, refresh. Let's try that again, perfect. All right now let's see about moving up and down in this list. On 38, which is Arrow Up means we have to go up. We'll simply say if resultsCursor is higher than 0, then we'll simply do the resultsCursor-- and we're going to move the cursor to the new ( resultsCursor ). Let's see Albania, arrow up. Okay, let's actually do the arrow down first. Here we're going to say if resultsCursor is smaller than matches.length- 1, then we'll do resultsCursor++ and moveCursor resultsCursor, okay? Let's do that again. So now when we hit the arrow down key, we can see that our cursor, well apart from this pesky auto complete thing from the browser but when we hit the up and down arrow keys you can see that we can cycle between our results. And hitting enter on one of them will fill that into our text box. And that's about it for this lesson. It's time to move on to our third demo. And I think that one is gonna be pretty popular because It is a content slider. So I'll see you in the next lesson.