Vue.js – From The Ground Up

Vue.js Tutorial From Scratch – e14 – Autocomplete

all right in today's episode we're gonna be working in a very common thing called autocomplete now if you're not familiar with that word you're definitely

familiar with this functionality this here is just an input field and when I click on it we're going to get a list of suggestions and of course we'll also be able to type into this to filter down

our list then if we click on one of them the list goes away and of course we get our input inside of this box pretty cool stuff we're gonna start from scratch so I'll go ahead and erase

everything and we'll start from the very beginning stick around [Music] alright let's get started so I'm gonna be using view CLI if you have any

questions on that of course check out earlier in the series when we covered view CLI but we're gonna save you creates and we'll simply just call it autocompletes so four options than this

let's go ahead and do a manually selected features and I will use the router and the reason why I want to do it this way is because of the following thing so for history mode we'll say yes

we'll go ahead and lint unsafe and now this is the part that I'm really interested in where do you prefer placing your configs I really do want a dedicated config file so I'm gonna go

ahead and say that I'm not gonna save this as a preset and we'll let that install alright and it is all finished now I happen to know that I'm also going to be using tailwind so let's go ahead

and pull that in now so npm install tailwind CSS alright and that is all set I'll be using code today just to change things up and here's my project in code so the

first thing I need to do is create a main that CSS file because right now we don't have one so let me go ahead and create main dot CSS and that is gonna be inside our source directory so we have

gone through this installation before but basically we do need to copy these three lines this is straight from the documentation of tailwind we'll paste those into my main dot CSS file and then

I have to go ahead and import that file so the easiest way is just jump over to the main dot J's file and let's go ahead and import it right here so we'll say import main dot CSS right on there but I

do need to go ahead and bring it into post CSS if we go back to the documentation scroll down just a little bit right here so using tailwind with posts CSS so all

we need to do is go ahead and copy this plug-in section and replace that right here we'll go ahead and get rid of the comments and we should be good to go so with that our project is all set up let

me jump back into the terminal and let me go ahead and CD into autocomplete the directory and then let's run npm run surf all right then everything compiled I'll

go ahead and visit that site and sure enough we are in so today I'll mostly be working with this about page here and what can get rid of that and basically turning this component into the

autocomplete component but of course the basics of this can be extracted into its own reusable component with no issues today we're really focused around the functionality of it so let me jump back

to code let me go ahead and open about dot view and here this this is basically this right here so the first thing I'm going to need is of course I'm going to need an input we know that input is

basically what we're going to be typing into so let's start off with just using a V bind into this element and our example of course is with us States so let me go ahead and type in state and

let's add the script section here and we'll say we're gonna have a data property it'll be a function that returns an object and in it we'll have a single piece of data for now which is

simply just state I'll go ahead and initialize that to just an empty string so if we take a look at that in the browser it's there you just can't see it let's add some classes to it to make it

a little bit nicer so the first thing is let's add a BG gray of 300 and then let's add some padding so we'll say px 4 py 2 let's see what that looks like yeah much nicer and finally one thing I do

want to do is turn off auto complete so autocomplete will set to OFF otherwise every time we type into this field our browser is gonna try to autocomplete and I'm not interested in

that for this example so we'll turn that off with autocomplete set to OFF all right so we have this running already so what's the next thing we need well we need some datum so let's give it some

data will say states we'll set that equal to an array and we'll add let's say Florida Alabama will add Alaska since the spelling is so similar and finally Texas

okay so we have our estates so now let's do this as a very simple implementation let's go ahead and on in put let's call a new method called filter States so filter States will be a method let me

add that down here we'll say methods filter States so what do we need to do in here well first and foremost we need to lowercase everything because we're not sure if the user is actually going

to follow the convention of these states but if we lowercase both of them at least we know that everything will match in terms of casing let's go ahead and add a new data property here and we'll

say filtered States and under filter States initially we'll set that to an empty array so in here all we would need to do is the following we'll go ahead and say this stop filter

States equals so we could take this that states right so this array right here of states will go ahead and filter and each one will basically have a state at some point and then inside of this callback

let's do the following let's return the state dot to lowercase that way it matches and if it starts with and then we need whatever the user actually inputted into our input field in this

case we save that to state using V bind of state so we can simply say all right so then this that states and then we'll have to do the same thing to lowercase that way they both match that way the

casing is not a problem and this believe it or not is the very basic implementation and it is actually working so if we open up about we can check out this filter States which is

currently empty but if we start to type whoops looks like it's not working we must have made a mistake let me go back to code and see here so this should be the model I'm sure you saw that let me

go ahead and hit refresh on this one let's hit refresh and now I'll go ahead and add FL and let's check this out and sure enough the filter States is now containing Florida now if we type in al

then now we see Alabama and Alaska being filtered so basically our filtering is working all we really need now is just a way to display it

so with that easy enough to do so I'll go ahead and add basically a new div here so say div but this diff is only gonna show if we actually have some filtered States so we could do that by

saying all right V if so if you have some filtered States in that case we're actually gonna show this diff otherwise we're not gonna want to show them and for now let's go ahead and add an

unordered list and then inside of here we'll have a list item for each one so to do that we'll use v4 and we'll say alright filtered state in filtered States and in here we'll just go ahead

and echo out what we actually have for filtered State alright let's check that out in the browser I'll hit refresh a el there we go so now we have Alabama in Alaska and if I keep

typing there we go so now we filtered it down to just this one but of course when I click on this I want to go ahead and replace this with whatever actually gets clicked so let's add a new event

listener for click so if we get clicked let's go ahead and set our state to filtered state obviously set state doesn't exist yet so let's add that as another method so we'll go down here

right under filter States will add set state and this will receive our state and all we need to do in here is just say this that state equals state simply enough let's try it out will type in F

I'm gonna click on Florida now notice that Florida get replaced up here here it is again I'll pick Alaska and as soon as I click it my text gets replaced with whatever I clicked on now one thing

you'll notice right away is well this is not going away so that's not great obviously once I clicked on Alaska I want that to disappear let's go ahead and style that before we even get to

that part though so this is simple enough to do with tailwind let's go ahead and give this a class of with 48 that way is nice and wide then also let's give it a BG

gray of 800 and then text white and then on the actual list item let's add some classes as well we'll add them right here we'll say class and for this one let's

add some top and bottom margin with py 2 and then let's add a border to the bottom finally let's go ahead and give it a cursor of pointer that way we get the

correct cursor for that and there we go so now we have this but now you notice is all the way on the left and really is should be right underneath this so of course flex comes to the rescue on this

one so we'll turn the whole thing into a Flex container but on the column so flex call and then all we had to do is just items Center and that should fix it for us

and there we go so we are good to go on this one I'll type in F and we have that and again when I click on this I want it to go away so for that we actually need to keep track on whether it's open or

not so let's add a new data property here and we'll say modal and initially our modal will be set to false meaning it is not showing so we're only going to show this if we have filter States and

modal meaning the modal is equal to true so not only are we going to do that whenever there are filters States but we also need to make sure that modal is set to true so now what would happen is

basically it never shows up because at this point we're never setting that to true so we need to find some strategic points where we actually set that modal to true so how about unfocus so we can

add a new event and say all right if you are focused meaning you get clicked on in that case then modal should be set to true all right let's try that one we'll click

on it and there we go so now we have that but now unclick we know that we need to disappear but the nice thing is we wrap that in its own method so when we set there States we're gonna set the

state but we're also gonna set this modal equals to false that way it goes away okay let's try one more time F and when we click on Florida it gets replaced and it goes away now one thing

you'll notice of course you click on it again then it actually pops in but the next problem we have is you kind of expect to be able to click somewhere outside and get rid of this

but there is no real easy way to do this really what we need to do is cover the whole thing in a blanket and if that gets clicked in that case we'll go ahead and set the model equal to false

now easy enough to do let's add a new div here and let's add some classes now at first I will give it a BG read of 300 just that it's really visible and you can see exactly what we are doing but

all we need to do is go ahead and set this to absolute and then set it to in set – zero this will set top-20 bottom to zero left and right to zero so let's check this out in the browser and see

what it looks like so we'll hit refresh and sure enough everything is covered in this red background but now we've lost track of our actual items we are covering our items so we're gonna have

to set some Z and XS on this so if we gave this new blanket if we gave that a z-index of zero then of course on our input we can give this maybe a z-index of 10 as well as this modal go ahead and

give this a class of Z 10 as well that way they are layered properly and sure enough if I click on F now Florida is visible and that is visible now the red of course is just temporary this is just

so that you see what we're actually working with if we get rid of it now it's like it's not even there you can't even tell but what we can do on this is if this gets clicked then we can add an

event listener so let's say if you get clicked on then we'll go ahead and set the modal equals to false and if we hit refresh now we'll type in F and I'm gonna click right out here on the white

and notice how that modal goes away so a pretty easy way to handle that now the last thing I want to handle is the initial state so when I originally click on this I kind of want to give the user

some potential answers already right off the bat so to do that what we actually need to do is create an initial State to create an initial state I will use the mounted listener so when the

component is mounted in that case let's go ahead and do the following let's just simply filter our states so when the component gets mounted go ahead and filter the states however at this stage

states will be equal to blank and let's see what actually happens when we click on it not much happens right because this is not matching to anything which makes sense so why don't we add a new if

statement here and we'll say all right so if this that states meaning the actual input field that length is equal to zero in that case let's just give them all of the states so let's go ahead

and say alright this stop filter states just simply equals their start States meaning everything the whole array and if we click on it whoops that should have popped up let's find out what

happens so filter States of course not filtered States it needs to be this method call right here all right let's go back to Chrome give that a go and now if I click on it there we go now you get

a list of everything right off the bat and of course I can click Alaska and it goes away and I can click outside and it also goes away but notice one thing now I clicked on Alaska but we still have a

list so it actually didn't filter and at first that might be a little bit confusing why is that not filtering even though obviously Florida does not start with Alaska but what's happening is that

the way that we are currently triggering that filter is using let me go over here is using ass input so what's happening is only when there is actual input change then we filter States if there is

no input change as in that initial click notice I never actually typed anything in here and I clicked on Florida so we're still seeing all of the states so to change that what are we instead of

using this when we put a watcher on that state property so check this out I'm going to delete that click event but now of course we need a way of triggering this filter States function

so easy enough we'll add a watch property here and we're going to be watching this state me that v-model state so if state changes in that case let's go ahead and call

filter States so essentially we are doing the same thing because this will get triggered if you typed into the filter but it will also get triggered if we clicked on one of the options and

actually change the input because in that case state also changes looks like the same mistake again not filter States filter States all right let's try this one more time click on Florida come back

here and sure enough now we only see Florida so that's pretty cool and of course if I start to remove everything everything comes back and we can do and filter exactly the same way because we

are actually watching for that state's property so a lot of cool concepts on this very real-world scenario that you're so used to seeing everywhere so that's basically how we would do it so

for some extra credit obviously our states need to be customizable we're not gonna want to actually have this data inside of it so of course we would use something like Axios to fetch a list of

states or a list of some sort but I'll let you handle that on your own in this lesson we're mostly focused around the functionality of how to make this autocomplete work so as always if you

have any questions drop them in the comments below don't forget to subscribe and thanks for watching

An autocomplete dropdown menu is a nice feature to add when there’s a set number of items an open field can be. Today, we are exploring how to code one from scratch using Vue and Tailwindcss.

For the best experience, follow along in our interactive school at https://www.coderstape.com

Resources
Vue.js Documentation
https://vuejs.org/v2/guide/

Download VSCode
https://code.visualstudio.com/

DigitalOcean Referral
https://m.do.co/c/7dce5364ef4d

Hit us up on Twitter with any questions or comments @codertape (https://twitter.com/CodersTape)

About This Course

Modern applications require a robust Javascript framework. In this series, we are exploring Vue.js from scratch, covering all topics of writing Javascript code that is maintainable, performant and best of all powerful.