How to add INSTANT database search with Django and HTMX 🕵️

hi it's Uncle here with another Django video tutorial this in this one we're going to be adding database search with htmx as a personal story at one of the first startups I was working at they had an internal sales page which you had to scroll all the way through to access that was annoying to me so I added this intern this htmx method to create a simple search for them and I was surprised at how unreasonably happy the sales team were about that because they'd been used to scrolling all the way down before so you can build useful things that help people with this six steps we'll first create the model we'll then create the views to handle the search data we'll that we return we'll then create the templates in which we'll render our results then step four We'll add the URLs to connect things up step five we'll check it works and then step six there's a bonus to make it all look even better okay let's go so we're here I've installed a virtual environment installed your Django and progress which I've already got and then set a good jungle project and create your app called Sim and you can see that here and then simply just wire it up as your new apps in to installed apps here or whatever you're calling your app um that's it to step one so now we're gonna add in the models which will create our database here to hold that we're going to then search copy that in as you can see um just following out a little bit and then run the migrations to in your terminal and there you go and that will create a database there with this schema which you should see pop up there it is it's equal right on to step two as you can see we're going quickly through so let's create the views to handle the data that we that we send at the back end from the front end copy that in there we don't need these two lines and now step three we will add a templates folder here templates to hold our HTML and then the HTML that will return so we will create one file called search HTML search and then we copy in this stuff this is going to be our kind of initial our base if you like and you can see htmx there and we're loading htmx there and then we're going to create another template called search results there search results and then copy this and this is just a fragment you could you could put these both in one template I'd recommend not I think it's clearer from experience to have them separated otherwise you can have views doing lots of things at the same time on to number four let's update our URLs these will be our Sims URLs we need to create this file and urls.play copy in this so and then we need to update our main URLs in our core app to be have this and we might as well delete all that as well and this includes our link to sim there now step five time for testing is set to run a shell here to go into Django and let us add in some sample data so just copy this in it's going to create some fun fun people and there we go crazy them great and they're now in our database here and then we can run the server with python managed.pylon server um exit your exit your shelter and then promise from me we're already running this because of I'm running it here so just you can enter that in for you and if we click that and now go to search there we go begin typing to search we can see it works congrats let's make it look better than this this is completely unsiled but yeah I mean that gives you functionality immediately so let's go into our bonus so step six now we're going to add some styling if we type in MIT we get Jen Smith but we don't know if I'm looking at it what path is matching it's actually the MIT of Smith okay so let's let's fix that so now we can copy this we have this extra styling here which we can copy into our search HTML and overwrite it and now we can refresh to see what's happened so you see it's already changed because I'm applying to stop this CSS now I want to add the extra thing to highlight just the text that matches our search query so we're going to let's get that in let's copy this in go to our views and paste it back over and you can see here we have this highlight match text and that will in this section it will find a query go through it and then put a little span here around the part that's matching and then with this highlight style that then we pick up here and add a special background color yeah and that's it and now if we go check it out there we go all done and you can see this allows us to we can quite clearly show and if anybody let's say you have users you were searching here or companies or sales whatever functionality search is necessary and very quick and easy to do as you can see so that's it check out my latest video I've got loads of other Django related tutorials hope you find that useful

Channel: Tom Dekan

Views: 4,507

Keywords:

Id: hC2vMJ5kna4

Length: 4min 40sec (280 seconds)

Published: Thu Sep 07 2023