Django live search | live search using django and javascript

hi guys in this one we are going to build this live search with the objects coming from our django database so let's try to put in test and i have only one object that matches test if i put something more i will get no results found if i put in for example i like i have i like python i like tesla this is all django and javascript so yeah without further ado let's get started all right guys so as usual let's take a look at what have i done so far so basically i started a brand new project called search broach and i also added one application called infos this infos application has been added to the installed apps list and i also told django where to look for additional templates so in the source directory i created a folder called templates and here i have my base html i got this code from getbootstrap.com i added some modifications for template inheritance so we have blog title log content and blog scripts i also added a wrapper a div class container to have some spacing on the left and on the right and inside i put it the blog content so this is our base html from which our main html inside the infos application will inherit from then i also started a very simple model i created a class info with two fields the name and the description and i added a string representation for the name and i also registered this class inside the admin so as you can see i'm already logged in and that means i created also a super user and here is our infos application and soon we will be adding objects and as the next step let's go to the views and over here we are going to do some imports first of all let's import from django views generic the list view list view so we will be using a class based view and from dot models let's import our info model and then let's define a class called maybe info a list view which inherits from list view so let's specify the model it will be info and then below let's specify the template name and let's set it to infos and then main html all right so before we go any further i'm going to save this and inside the infos i'm going to put a folder called templates inside i'm going to put another one called infos and inside i'm going to create this main html so this main html will extend from base html it will inherit from base html and then let's specify the block title title here i'm just going to put in home block content and block scripts script script all right so let's also save this we will return to to this template in just a second but now let's go to the views and over here i'm going to write down get context data because we need to pass in the query set to our template and with class based view we are using this get context data method so over here what i'm going to do is to define a query set however we have to do it a little bit different so i'm just going to name this this key as qs json and this is going to be okay i have to import json first import json and now what i can do is to write down json dumps and i'm going to put in a list of info objects values okay so now we can actually go ahead and save this and let's go to infos and let's add some objects so i'm going to put in test info test description save and add another one hello world hello world i like python python [Music] is awesome [Music] how are you hope you are doing okay and let's add maybe two more j s is cool two yes it is and let's say i like tesla tesla cars are awesome all right so now we have some objects maybe let's add another one basketball or foot ball i like sports just create any objects you like all right so the next step is to go back to domain html and we are going to begin by picking up the data from the template so inside the block scripts we are going to create a constant and this constant will be called data and here we just need to refer to and this q as json okay so we have um if we if we take a look at our main sorry our views py here we are passing q as json so in the main html let's pick it up and let's console.log it so let's console.log the data so um there's one more thing we actually forgot to do is to register our urls and i'm going to do it directly directly in the project folder so i'm going to skip and the step to create a urls py file within our infos application i'm going to do it directly over here so from infos and views we want to import what was the name of the view in full list view info list view so let's define a path it will be the main path and over here info list view as view and let's set the name as the main view alright so right now let's go ahead and open up this main view so here we have a confirmation that the django has been successfully installed let's refresh nothing is here but let's right click and inspect and let's go to the console and there it is this is what we actually get so if we look closely we should actually see those objects we have ids and we have over here hello world so this is not exactly what we wanted to have so as the next step i'm going to head over to main html and i'm going to do something with those data so let's define a new constant and maybe let's call it our data and this is going to be json parse and what we want to do is to get the data and with the use of replace we want to get rid of those quotes over here those signs okay so let's do it very quickly quote and i forgot about the end at the beginning and then we want to put in g and replace it and now over here come the single quotes and one double quote so actually let's console log how do our data look right now so i'm going to save it refresh and there we are so now we have nice looking data that yeah we can work on so as the next step uh maybe we should work a little bit on our block contents since we have already the data that are coming from our database inside the javascript let's actually create some input and this input will have a id of maybe let's call it search here and i'm also going to give it a class of form control and i'm going to put in a placeholder that i'm going to name type here to search something like this okay so we have our input and we also need a place where we are going to display the data so i'm going to create a div and i forgot about the closing and let's put in a div with the id of a box and i'm going to close up this div maybe i'm going to indent this so it's a little bit more readable and inside of this box i'm going to put in the initial state so initially we will simply use a for loop to display all the objects so initially it will be for item in our object list and this is uh by default in class base view in a class in list view okay so we have an object list and over here what we can display is just an item item and let's put in a break line all right so let's save this and let's take a look at how this looks right now okay so we have an input and we have all these objects by string representation okay so i'm going to do one more thing very quickly i'm going to head over to the base html and in this div i'm going to add a margin top three and it looks a little bit better and maybe also inside the main html over here i'm going to add a margin bottom three and there we are okay so this is something now that we can actually work on so we can return to our javascript part and let's grab our input so i'm going to put in another constant and i'm going to just call it input and this is going to be document get a lament by id and we want to get this search here let's console log our input save this refresh and document get element by id okay and there it is so here we have our input so this is working and now let's also define another variable which will be an array let's call it filtered r and initially it will be blank okay it will be empty so now what we can do is to refer to the input and add a event listener with the event on a key up okay so it refers to the keyboard when a key is up something will be executed okay so here i'm just going to put in an arrow function and yeah let's reset the box so box in our html will be initially empty after a key up okay so initially it's actually filled with objects from the database but after putting a key up it should be reset it to blank so let's see if this is working i'm going to hit refresh and i'm going to type something and there it is so let's refresh it again i have my key down nothing is happening i'm putting it up and there it is it's gone okay the content is gone so um now we can refer to the filtered array and we need to actually check if the content that we are typing over here matches the the item title we will do it by the title so i'm going to put in filtered array and this is going to be equal our error data and we want to apply a filter method on the air data where we are going to grab a single info object and we are going to simply check if the things that we are typing so here we have to pass in event and e target value so we are checking if this e-target value which is basically what we are typing is included in every single object and if it's included it will be added to this filtered all right so right now what we can do maybe is to console log the filtered array so let's see it i'm going to refresh and i'm going to put in test and let's see what do we have test info we have a single object and if we refresh as you can see only one object has test so this is working and [Music] as the next step let's do an if statement where we are going to check if the filtered array length is greater than zero and if this is the case we are going to apply on the filtered array a map method where we are going to grab a single item and we are going to refer to the box inner html again and here we are going to add to our box all the objects that match this condition and are in our filtered array so let's use backticks for this i'm going to maybe add a bold bold font and inside of this bolded font we are going to inject the item name and since i'm using bold font over here i'm going to use it also over here bolts bolts and okay let's also not forget about the brake line all right so this is the case if there are any matches if there are any uh items in our filtered array and if this is not the case so maybe actually i also can change info over here so let's just have uh the same naming and then in other case what we want to do is also to refer to this box in our html but this time let's display maybe also in bolded font something like no results found okay so let's see if this is actually working i'm going to save this hit refresh here is bolded and let's try to type something so i'm going to put in hello world okay this works t okay so we have t t d d t a t e so we have only test and tesla and test is only test info i like python i like tesla and if i type something like this we have no results found so this is working of course you can do more things over here as a challenge try to add hyperlinks so try to add some kind of a link for these particular objects you should create a detail view so once you click on it you will be taken to to the detail page where you will see for example the description so you can treat this as a challenge but anyway i'm going to finish off over here i hope you enjoyed this video if you do if you did please subscribe to the channel and hope to see you soon in some other pretty cool tutorials have a great day take care and bye bye

Channel: Pyplane

Views: 26,664

Keywords: django live search, django and javascript, django and js, django javascript, django js, live search in django, live search django javascript, python django search form, django with js, django with javascript, django javascript integration, django 3 tutorial 2020, learn django with js, Python django javascript

Id: jqSl36xR9Ys

Length: 20min 6sec (1206 seconds)

Published: Fri Oct 09 2020