Add up, down, and enter keyboard functionality to navigate search results for a VueJS site

now that we have some keyboard detection built into our search functionality mainly command k let's add a little bit more what i want to do is to be able to push my down arrow and my up arrow to toggle between the results and then ultimately click on return on my keyboard to go to the page for the highlighted result we'll be adding some more view click handlers to our input field we already have a couple here one for focus for instance let's add some more after the at focus handler and what i want to handle is at key down of the up arrow dot up and i also want to prevent whatever defaults might occur so i'm going to do keydown dot up dot prevent and then call a method and the intention for this is for the search results i want to i'll go up and down and highlight different search results if i push the down key for instance it should go down one result and then highlight that if i click the up key as with what i'm trying to define here it should go up one let's say that this is going to call a method that we're going to name highlight previous and i'm going to copy this and duplicate it and then handle a key down event for the down arrow so instead of up and right and down we'll still want to prevent the default then instead of highlight previous we'll create a method called highlight next and then lastly for a key down event for enter i want it to go to that highlighted document put an add key down dot enter and we'll call method let's name it go to doc and then we'll pass in a variable into that we're going to pass indices along to detect which page we're on and then create a route based on that all right let's go to the script section and we'll return more data for a key that we'll call highlighted index and we're going to default this to negative one when we start to search for something we don't want anything to be highlighted right away we'll only highlight something once we click the down arrow or if you hover over one of the results let's scroll down some more and add some more methods first one that we'll do is highlighted previous and then we'll create one for highlighted next okay highlighted previous and curly brackets and for this if this the highlighted index which right now by default is negative one when you first start out if that is greater than zero what we're gonna do is to change this.highlighted index and we're gonna iterate it down by one minus equals one essentially this is saying if our highlighted index is for instance two and we click on the up arrow we're going to change the index from two to one and what that's going to do eventually is it's going to highlight the third item on the list to highlight the second item on the list the second item on the list would be at an index of one all right this will handle our highlighted previous or clicking the up arrow on our keyboard let's add one for clicking the down arrow on our keyboard in other words highlighted next all right highlighted next come to think of it it's not highlighted i think it's just highlight previous and highlight next okay highlight next and then another if statement if this the highlighted index if this is less than the total results then what we want to do is increment by 1 the highlighted index but we need to find the top for that so how do we find the ceiling for the index results well let's figure this out let's scroll up and i think one thing that we could do is similar to what i was going to do with the go to docs with passing along the indices what i could do is pass along the indices and then the count of the total hits that we have for that let's try passing along indices dot hits the length that should provide us the ceiling okay let's go back down to highlight next all right and we're retrieving basically the result count let's type that in here now if this the highlighted index is less than results count then let's do this operation this the highlighted index and then we're going to increment that by one cool now that we have some keyboard commands to navigate through the search results we now need to find out a way to highlight the search results and to do that what we can do is compare the index of the search result to the current index that's highlighted let's add another method for that comma and let's call this is current index and we're going to retrieve the index i assume for this let's pass that in and curly brackets and what i think we'll do is do a comparison between the index received and the highlighted index and return either true or false based on the results of that comparison okay that's going to look like return and index and then compare it against this the highlighted index all right where should we use this method somewhere up in the template let's take a look all right this whole next link area right here is going to be each individual result let's modify this class element to have a highlighted effect if this is the one that should be highlighted okay we'll add in colon and then class equals and let's change the background to be bg blue and i'm thinking maybe 900 will do okay we'll highlight it with the dark blue if the following condition is met we'll do his current index and then of course we'll pass along the index all right and this whole thing right here it needs to be within curly brackets let's add those curly brackets in and also it's kind of confusing because we have the index from algolia and we also have the index that we could retrieve that tells us the actual index of the result which is what we want in this particular case which we're not defining that anywhere but easy enough we could include that in the v4 statement so v4 and then hit and let's also retrieve the index okay cool there we go okay let's save this out and take a look okay let's command k and let's type in something uh let's get to results and then push the down arrow key ah awesome then again it looks like on the upper limit on the previous side it hits the top wall and then doesn't go any further but if i click on down you can see that the highlighted effect goes away when i click down right there well that's probably a pretty easy fix let's go back into the code real quick and scroll way down to the bottom here and i'm guessing under highlight next result count obviously we'll want to decrease that by one let's save this out and try again type in this two results there okay and then down down and it should stop right there perfect that's what it's doing up up down down cool one more thing i want to do if i hover over one of these items with my cursor i want my cursor to take priority and then have that hover over effect on that particular item and then what i want to do from there is to have the down arrow work from that new current highlighted index that i'm basically creating when i hover over one of the search results items so we can see that functionality is not working right now let's go add that in real quick all right let's go down in this area let's see next link and then our search results this div right here on this div that contains our search results let's add in a mouse over function at mouse over this mouse over operation right here and what happens if we hover the mouse over we want the highlighted index to change all right in this case we're going to change the highlighted index and we're going to set that to the index of the results that we're hovering over let's just type in index all right and then save that out and take another look okay let's start typing then click the down arrow alright we see the first result highlighted now i'm going to take my cursor and hover over the second result and we see that highlighted okay perfect that's exactly what we want and then from here the expectation is if i click on the up arrow on my keyboard then the youtube example will be highlighted so let's do that awesome okay one last thing if i click on enter i want to go to that page of the highlighted search result and of course earlier under input we put the key down dot enter to call this method go to docs and we haven't defined that method quite yet let's define that now and remember we're going to be passing along the indices to that okay go to docs i'm just going to copy that then head down to my methods then add a new one after its current index so do a comma and paste that there and we're passing along the index or indices i'll just call it the same thing indices and do our curly brackets and what we'll do is tell a router to go to the page so we'll use this and then we're going to refer to nux dot router and we'll be pushing and i want to grab the object id for the current highlighted entity because that is equal to the same name that nux gives that page okay for that we're going to put in indices dot hits and this is going to be an array and we want to find which position of the array the route name is going to be under pass along this the highlighted index for the position of the array and then for that hit we want the object id all right let's give this a test perfect that looks like one more little thing this stayed open so if that route changes we want that to close let's go back to our code and make that happen then right before computed let's put watch and let's watch for a route change dollar sign route and if the route changes we want this that results to equal false let's type in this dot show results equals false and another nice thing to have too is if the route changes we also don't want the input to be in focus anymore so let's do this dot and then call that reference refs dot search input and what we'll do is blur that let's go back and see if we did good all right let's click on down and then let's click on youtube example and all right we went to a different page the results drop down went away and input is no longer in focus

Channel: Cleavr

Views: 161

Rating: 5 out of 5

Keywords: vuejs, search results, up arrow, down arrow, search, nuxtjs, nodejs, cleavr

Id: Pqwdqp-oBsA

Length: 11min 31sec (691 seconds)

Published: Mon Jan 11 2021