Simple Search in JavaScript [JavaScript Series]

hey guys I'm gonna show you how to build a simple search using pure JavaScript so basically the way this works is you type in a search criteria and you will get results based off of that and you also get a message if you get no results so let's go ahead and dive into the code so what I have here is an HTML document with a search input and a JavaScript file and that's this right here and I just have some sample data I have an array of objects which with a unique name for each object that's what we're gonna search through and I also have this blank list here this list group with no items in it right now the items are going to be added later when we perform the search so basically what this looks like is just a plain search input does nothing right now and then we'll go ahead and add that on there so first I'm going to add an ID to this list and I'll just name it list and then for the input also add an ID and name it search and I basically want to do that because I'm gonna grab these values by their IDs since that's the easy way to grab elements in JavaScript so then here in my JavaScript file I'll go ahead and grab these search input and I'll just name it search input I'll do document.getelementbyid d search and then I'm going to add an event listener to this input an event listener will basically listen for any type of event that we want and then we can perform a callback function once that event is fired so you can say search input add event listener and then you tell it which type you want I'll say input and then the callback and so for right now I'll just say input event fired right I just want to make sure that this is working so I'll go back over here and I have my console open over here so you see every time I type we get that console log so I also you can also pass in the event as a parameter and so what that'll do is it'll log the entire input event so that looks like this you'll see we get the hill input element we can also access the element itself its classes values and all kinds of stuff so we're only interested in the value so I can do event that target value and that'll actually just give me whatever value is in that search input right so we're basically going to grab that value and perform the search using that value every time something is typed so I'll save it for right now to this variable and then we'll come back to this in a second so first I'm gonna grab this list using that ID so just up here I'll say list equals document.getelementbyid d list alright so and then I'm basically just gonna have a few functions that do all the things that I need one is gonna be to set the list and this is gonna take in these search results right now does the naming group so basically what I'll do is once I perform the search and I filter out all the names that don't match the search criteria I'll pass that in to here right so this is basically people but filtered you know based on the search criteria I also have a function called a clear list and basically this is just going to remove all the list items from inside here because basically this is going to append a list item every time and so we want to remove it and start fresh whenever we perform a search otherwise you have you know for example if I add in rock into the list and then I perform another search that it meets the criteria it will add Rock again so we clear the list first to make sure we don't have duplicates and then I'm also gonna have a function for showing no results I'll just name it set no results okay so let's start off with the set list function okay so like I said first you want to clear the list so I'll call that and then inside of here we're gonna loop through the group right so I'll say cons person of group and so each person represents you know one of these objects inside of here right depending on what came back from search results and just outside this loop what I'm going to do is I'm going to say if the group dot length is equal to zero meaning no results were found then I'll go ahead and set that no results message so then inside of this loop I'm going to create a list item which is going to go inside of here and I'm going to create one for every single item of the search results so I'll say item equals document create element list item then we want to I'm actually gonna add a class to this you don't have to do this part but I'm just gonna say list group item this is part of the bootstrap again that part is optional I'm gonna add text to this list item so I'll say text equals document.createtextnode and then I'm gonna pass it the person name right so that's gonna grab this object right here the current one in the loop and it's gonna grab its name and add it to the text of this list item and then we just need to append that to that item so I'll say item dot append child text then we need to add that list item to the list so I'll say list dot append child item alright so simple as that and I'm also going to copy this and do the same thing here in the no results but instead of setting it to a name I'm just gonna say no results found okay and then in this clear list what we can do is loop through all the children of this list and remove each child you can do that with a while loop you can say while list has a first child go ahead and remove it so you can do lists don't remove child list first child so that will loop through and remove everything from that list and start off fresh and start entering new ones so then let's go ahead and move into the event listener this is where the actual search is performed so first we'll check if the value exists right we don't want to search as they're spaces or something so will say if value exists and the length is greater than zero right and we add that trim which is a string method to remove all spaces right we don't we don't care about spaces we just care about the actual value so this will remove the spaces on either side of the text so else meaning there's no value in the search we'll just clear the list so first I'm gonna go ahead and make the value I'm gonna remove the spaces like I said and I'm also going to make it lowercase to make sure that you know they already are lowercase here but I also want to lowercase the input to make sure that it matches this because my search is going to be case sensitive okay so then I'm going to call the set list which is going to create the new list items and I'm going to pass it in the array myarray up here so I'm going to pass it that a right but I don't want every item so I'm going to filter them and I'm going to filter it by this value using the search term so go ahead and create a variable I'll just name it person right so for every person inside of the people array we only want to include it if that person's name includes the search term right so if the search term is any part of the name then it's okay to include that so this will go ahead and remove every item from here that doesn't match the search criteria and again this is case sensitive so that's why we head and lower case everything here we also want to sort these by relevance right because this is just gonna filter out the values that don't match the search criteria but it's not gonna put them in order right we want to show the items that are most relevant to the search first so let's create a function up here that actually does that we'll just call it get relevancy okay and so this will take in the value which is going to be the the name and it's going to take in the search term okay and it's going to compare the two and return us you know a number based on relevancy right so obviously if if the match is exact meaning you typed in the exact name then we want a high relevancy we want the maximum relevancy right that way that item will have priority over all other items so we'll say if value is equal to search term we'll go ahead and return - this doesn't have to be - but you just want this number to be the highest of all the numbers that you do return so else if so if it doesn't match exactly but let's say the value starts with the term then we want to return one so again you want this to be lower than this one because this is the maximum right this is as close as you can get to the search term as possible so as as the relevancy decreases you want to return a lower and lower number this could be anything you could do 100 and then you know this one could be 75 whatever it doesn't matter just as long as you decrease their relevancy as the search term you know matches less and less so then I'm also going to do else if the value is anywhere in that if that search term is anywhere in the value so I can say includes term search term I think I accidentally put the wrong one here so if that search term is anywhere in the value it will return a relevancy of zero so then down here when we set this list of people we want to go ahead and sort that by the relevancy which we have that function now so right here in the closing parentheses of inside this method you can say dot sort and then you pass in another parentheses and then you just pass in two arguments you can name it whatever so you can do person a person B that's fine doesn't matter but you need those two values to compare and so you're gonna return the score of person B minus person a right and that will sort by ever by whichever one is most relevant to the search term and so you can do that by doing return get relevancy and then pass in the first one person B dot name then you want to also give it the search value minus get relevancy of the other one person a oops person a dot name also the search value alright and then before we close this out I'm going to change this value up here to let didn't realize that I assigned it a constant so this should be a let instead so that I can reassign it here so I'll go ahead and sort by relevancy so you want to go ahead and try you know make sure that your search is working that you do get results and that if you type in you know the wrong thing you get no results you also want to make sure relevancy so see how I type the letter R and both of these have it but this one starts with it so it comes up first right

Channel: David Acosta

Views: 31,210

Rating: 4.8597784 out of 5

Keywords: vanilla javascript, pure javascript, search engine, tutorial, how to

Id: SWkPXbQXArk

Length: 12min 16sec (736 seconds)

Published: Sat Sep 22 2018