Build a Reactive Search Filter with Svelte

in this video I'm going to show you how to add this reactive search and filter functionality into your application using svelte we'll be taking advantage of spelled stores to accomplish this and we'll be able to search and filter based on a number of different properties within our data such as the title description brand and categories if you're using typescript we'll be covering type safety at the end of the video and if you'd like to follow along there will be a stack Blitz Linked In the description below that you can spin up in just a few seconds if you get back out of this video I would greatly appreciate if you like it subscribe it greatly helps the channel out a lot and enough of me around my mouth let's go ahead and get into it alright so this is where we're starting off today we just have a very basic app with some data here that I've gotten from the dummy Json API one of my favorite dummy Json apis to use and we're getting some products here and as you can see I'm just rendering them on the page for the time being so you can see the structure of them and before we can begin implementing a search functionality or slash filtering functionality to these products we actually determine what we want to search by so what I don't want is I don't want the user to type in 549 here in the search bar and then have it show this product here because the price is 549. so there's certain fields that I do want to search by and those are going to be the title description the brand and the category so that'll be a decision that you often make within your application to determine what all things you want to search by maybe you just want to search by one that's perfectly fine that makes things really easy but since you want to search by all of these what we have to do is create a new array with the same objects here except we're going to add a new property to them called Search terms and basically we're just going to smash the title description brand and category all into that one property so we can use that to search by and this will make more sense here in just a second so let's go ahead and do that first so inside of our code here you can see that we're just getting the products here as you would from any any other spoken application and we're returning them back to the page you can see that they're accessed through data here so data.products is what we're rendering on the page and so we're going to do is we're going to define a new array of products with that Search terms property added to each of the objects so what I'm going to do is I'm going to say can't search products equals data.products.map I'm going to take in product and then what I'm going to do is I'm going to say dot dot product right so basically what I'm doing is I'm returning all the current properties that are on product I want to keep those right and I'm going to add another one called Search terms and this is going to be it's going to look really silly but I promise you this is a fine way to do this we're going to say product.title we're going to say product.description product.brand and product dot category and I promise this will make sense in just a few minutes but really all you want to do is we're going to have all the things that we can search by on this one property so we can just search and then just check this one properly to see if there's a match if there is then we can return that product if there's not then obviously we know to filter it out okay that's why we're doing this like this there's a million different ways you could do this this is just one of the ways that I found to be pretty simple to visualize so now that we have this search products data here we actually need to implement the search functionality and then we're going to be using a store for this and we're actually creating a function that will allow us to create a search store so we're going to call it and then pass in data so that we can create multiple different search stores across our application with different data sets and they'll all function and they all should work the same way so what I'm going to do is I'm going to go into my lib directory here and I'm going to create a new directory called stores and then I'm going to create one called search.ts and again the store itself isn't actually being created here we're just creating a function that creates a store and then we're going to create that store on our page.spel so we're going to say export cons create search store it's going to take in data and if you're using typescript at the end of the video I'm going to walk through how to make this type saved and add type hints and all that but just for the time being we're just going to kind of roll through this so the viewers who aren't using typescript are still able to follow along without getting too confused here okay so what we're going to do now is we're going to say const subscribe set and update and we're going to destructure these from writable which is comes from store right so we're creating a new store here we're defining a store and this is going to be an object and the first thing we're going to have in this object is data and that's going to be equal to data so data like this is the same as doing data data and I'll just do that I guess to make it a little bit more obvious here and then we're going to add another property called filtered and the value of this by default is also going to be data and then we're going to have a property called search which is going to be an empty stream by default because nothing is being searched by default we have to wait for the user to actually search for something before we update this okay and then all we're going to do is we're going to turn subscribe set and update so now back on our page.spel what we can do is we can actually import that and we can say cons search store equals create search store which we need to import from lib storage search remember that takes in data so we're just going to pass in the data that we want to search and that's going to be these search products array that we just created here so now we have a store so now instead of doing json.stringify data.products we can do dollar signs search store dot data for example and remember that's this data here which is the same thing as what we passed into it so now if we come into our application here we can see that we now have Search terms we see all these Search terms they look pretty silly so we're now using the stores data as our data source here and what we'll do is we'll actually change this to filtered because by default remember filtered is going to be the same as data and then when we search for something filter is going to be updated we haven't implemented that functionality yet but when we actually search for something filtered is going to be updated with that filtered data so the data that matches our search so we want to display this here so now let's go ahead and get to the point where we actually Implement these search functionality so what we need to do is we go back into our search.ts file and we're going to create a new function called search Handler and you guessed it this is what's responsible for handling the search it's going to take in a store which is going to be whatever store we're currently working with that point in time and what we're going to do first is we're going to define a search term right so we're going to get the search term and that's going to be pulled from the store that we passed in store dot search dot to lowercase or an empty string and the reason that we're converting this to a lowercase is that we don't deal with any case sensitivity issues when searching for products so if we didn't do that and we were to search for iPhone 9 if we typed it in like this it wouldn't find it because it's expecting us to do I capital P lowercase h o n so that just avoids that altogether for us and then what we're going to do is we're actually going to filter the data so we're going to set store.filter which remember is the store that we pass in here again in this case it's going to be modeled the same way as this so we can see that store.filtered is currently set to data however we're going to reassign that so we're going to say store.filtered equals store.data.filter so we're going to filter the data here and then we're going to get an item which can be each one of the items within that array so remember in this case oops let me make this an arrow in this case item is going to be one of these objects and with Filter we either return true or false right so if it's true the item gets added to the filtered array if it's false it gets filtered out so it's not going to be there so what we can do is you can just say return item dot Search terms so remember item Search terms here are these this jumbled mess we passed in here dot two lowercase again avoiding that case sensitivity concern dot includes search term so again what we're doing here is we're setting store.filtered to a filtered version of the store.data array which is our original data set we're only going to return the items we're only going to have the items here where the Search terms include our search term now that might be a little bit confusing but our search term is what we're typing into the search box Search terms is the terms that we set within the map here so what we want to do now is we want to actually subscribe to that store so we can come back into our page.spel and we could say const unsubscribe because the Subscribe method of a store returns unsubscribe and then we can say search store dot subscribe and then we'll say model and then we'll call search Handler which we need to import with model so what subscriber is going to do is actually going to watch for changes in the data of our search store right and then what's going to happen is when that data changes it's going to call this function here and model in this case we hover over you can see that it's literally our store model so we have data filtered in search so this is the data of our store we're going to pass we're going to call search Handler and pass in the stores data right so then we have we're going to run this function here which is going to get the store's data it's going to rip out the search term from our store which is here and then it's going to update the store dot filtered with the filtered data and since we subscribe to this store we actually need to unsubscribe so we can do as we can say on Destroy which is going to come from svelte and we're going to say unsubscribe so in this page component is destroyed we will unsubscribe from the store so we don't have a bunch of subscriptions and memory leaks and whatever other bad things can happen from having too many subscriptions open at the same time so now you may be wondering Okay cool so when our store when a change in our storage data is detected this is going to run which will then filter out our data but how do we actually even initiate a change to that store what we can do is we can actually bind the value of input here of our search input set that equal to search store with a dollar sign in front of it right dot search so search store.search is going to be set to whatever the value of this input is as we change it it is going to update which is going to call this function here that we just walked through okay so now let's just see this in action by going back to our application and if we type in something like laptops you can already see the data starting to change as we type so now I'm just getting laptops here so all these category of laptops now if I search for let's just try to search for like an ID like 17 . we're not going to get anything right because we're only searching by those Search terms so if I search for iPhone I'm only going to get the iPhones and so on and so forth okay I already have some uh preset style set up that we can use in order to make this look a bit better so let me just add those here so let's go down here and remove this pre-statement and then I can also remove this because because I already have that in the CSS and we'll set up a product grid and then what I'm going to do is I'm going to say each search store dot filtered as product I'm going to set up another div with a class of product H2 with the title A P tag with the product.description another P tag with badge that's going to be the product.category and then one more for the product.brand this looks really ugly but at least it lets you visualize it a bit better here so let's go look at our application now and we can see that we now have a bunch of these little cards here with our products and as we search if I search for MacBook you just get the MacBook and you can see that if I just type Mac we're now having MacBook Pro elbow macaroni uh 400 grams of elbow macaroni if you're interested in that and then we're also getting this plant hanger for home and that and the reason we're getting this is because Mac cream is in the description right so we're still going to pick that up so that's how you can add a basic search filter to your data in your spelled application if you're using typescript stick around because we're about to go through the type safety piece of this so let's go ahead and get into that now okay so the first thing we need to do to add proper type safety to this is to define the model of our search store so I'm going to set up an interface here and it's going to be called search store model it's going to be a generic that extends record because it's an object right with a property key and any and it's going to have those three things gonna have data which can be a type of T an array of t it's going to have filtered which is also going to be an array of T and then search which is going to be a string and we're just modeling this here right and then for the create search store this is also going to be a generic and we'll say t extends record the same thing again property key any and then data is actually we have type an array of T and then for this writable this is also this is also a generics we can say search store model T like that and then for our search Handler it's going to look very familiar T extends record property key any and then store is actually we have types search store model T and now we should be good to go now if we come back to our page.spel as it stands right now I actually don't have these products typed so what I'm going to do is I'm going to define a type called Product and I'm just going to include a few of the types I'm going to do the title description Rand which is also a string this is also a string and then we also have category which is a string and we also of course have Search terms which is also a string so I know there's a lot more to this but just as a demonstration I'm sure that if you're working with a database object like Prisma you already have the types properly defined I just want to show you how to use those so now that we have product typed here what we can do is we can asset the search products to an array of product and then obviously within this map here we're going to have this single product is going to be a single product so now search products which is being passed into this create search store is of type an array of products right and we can see here that we're now having product be passed here in this generic so now if we come down here and we just say search store dot data remember this is an array so we need to access one of those array items we now have type in Sears we can do brand category description Search terms and title we also have access to the search store as well because of the fact that we added that model so we could say search store Dot and we're not going to see we have data filtered in search so the same things would apply across the different parts of your application so now if we come down here and I open up another one I can say product Dot and then I'll have those type hints there as well so that's how you can actually make this type safe as well and as we include today's video on adding a search filter functionality into your application with felt it's pretty simple but I think it covers some interesting cases you know there's a lot of times you get an object and you're not sure how you should Implement search for it so there's just one way that I've shown you today that you can do it of course your mind can go wild you can think of any different way that you would want to filter that data but of course if you have any questions you can leave them in the comments below if you got value out of this video I would greatly appreciate if you would like and subscribe it greatly helps the channel and if nothing else I will see you all in the next video foreign [Music]

Channel: Huntabyte

Views: 12,604

Keywords: sveltekit, sveltekit tutorial, sveltekit crash course, sveltekit form actions, sveltekit forms, sveltekit actions, form actions sveltekit, api route svelte, svelte routes, layouts, advanced layout sveltekit, sveltekit icons, sveltekit extensions, sveltekit productivity, svelte search, svelte react, svelte searchbar, svelte filtering, svelte stores, how to add search to svelte, search data svelte, svelte data search

Id: lrzHaTcpRh8

Length: 16min 11sec (971 seconds)

Published: Wed Dec 28 2022