Add Human Dropdown with airSlate SignNow

Add roomer dropdown

[Applause] [Music] [Applause] [Music] hi everyone welcome to GT coding in this video we will add the search functionality to the select box that we designed in the previous video so this is what we have right now and we can select any of these options over here and it will be displayed over here but now we want to add a search box so when we click on this division we can see we have an input box and we can type anything over here so if we type M all the options with M inside it will be displayed over here and in this way the user will find it easier to select the options so let's go ahead and start with the index dot HTML this is the same code we had in the previous video so let's go ahead and add our search box so after the selected division let's create a new division and we will give it a class of search box and in that we will have an input box and the type will be 'text and then we will give a placeholder and we'll type start typing so that is basically it with the HTML now let's go to the CSS and let's style the search box so here we will type search box and we'll target the input inside the search box so first we will give it a width of 100% and then we will add a padding of 12 pixels and the 16 pixels and we'll set the font family to a Roboto sans-serif and the font size to 16 pixels and we'll set this in relation to the select box so here we will tap position absolute and then we will add position relative to the select box so here we will type position relative and then we will add a border radius and we'll set it to eight pixels eight pixels and zero zero and we'll also add a z-index so that it will stay above the options and then we'll set a border of eight pixels solid 2f 3 6 4 zero and we'll also remove the outline that we get when we click on this input box so for that we'll type search box input : focus and here we'll type outline to none now when we click on this select box we can see that we have our options displayed over here but it is under the search box so we want to add a margin so let's go over here to the top and here for the options container active we will add a margin so we'll set the margin top to 54 pixels all right so now we can see the options and the search box displayed correctly we don't want to display the input box initially so first of all we will set the opacity to zero and pointer events to none so that we cannot click on the input box and we'll also add a transition 0.4 seconds now whenever we have the activeclass applied to the options container division then we need to make changes to the opacity and the pointer events so here you will type select box Options container dot active and then you have to type the tilde sign over here because the search box is placed after the options container so if you go to the HTML we can see that we have the options container over here and then we have the selected and then we have the search box so the search box is not right after the options container so we cannot use the plus symbol over here so you have to use this symbol over here and then here we will type search box input and we'll set the opacity to 1 and pointer events to auto all right now if you click on this we can see our input box is displayed over here and when we click on this again the input box disappears so our styling is complete now let's go ahead and add the functionality using javascript so let's open the main door JS file now first of all here we have to access the search box so I'll type Const search box equals document dot query selector and here we'll type dot search box input and then let's add an event listener to the search box so here we'll type search box dot add event listener and we will listen for an event called key up so whenever someone types something inside the input box this event is fired all right now here we'll create a function and we can also provide an argument over here so this argument we can use to access the value of the search box you can name this anything you want I will just name it e for event and in a function we will call another function which will create in just a minute so here we will type filter list and we'll pass the value that we get from the input box so that we get from e dot target dot value so in this line of code we are getting the value of the search box and then passing it to a function called filter list so let's create this function now so I'll type Const filter list and we'll be getting an argument for our function so we will name it search storm and we will create an arrow function over here now what we'll do is we will change the value that we get to lower case so that we can display the options even if the user types in lowercase or uppercase so let's go ahead and type search term and we'll set it equal to search term dot to lower case now you have to look through all the options inside the option list and check whether each of the labels inside the options match with the search term so we'll use a for each loop for the options list options list dot for each and here we'll type option for the single option and we'll create a narrow function over here now here you have to match each label to the search term so we'll store the label inside a variable so here we will type let label equals option dot first element child so this will select the input box and then we have to select the next element so we'll type next element sibling now this will select the label so here we will type inner text dot to lowercase so here we are accessing the label inside the option and converting it to lowercase so that we can match it correctly to the search term now here we will type if label dot index off and then we will type search term is not equal to minus 1 so this index of method checks whether the search term is inside the label or not if it doesn't find the search term inside the label then it will return minus 1 so here we are checking whether the value is not minus 1 so if the value is not minus 1 then we can be sure that the search term exists inside the label so we can type option dot style dot display and we'll set it to block and if that is not the case then we'll just copy this code from here and here we will type none so if you find the search term inside the label then we will set the display of the option to block or else we'll set it to none so let's go ahead and test whether this works so let's type something over here and we'll type a and we can see all the options with a inside it is displayed over here so if you type a are only the options with AR is displayed over here so our search functionality is working alright now we will add two more things over here so when we click on this select box we want the curses to be displayed over here so that the visitor can start tapping right away so it'll be a better user experience for the visitor and the next thing we want to do is whenever we type something over here when we click on it again and now when we click on it again we can see that the previous values are still here so we want to reset our search box as well so let's go to this code where we added the event listener to the selected here we'll go ahead and we'll add an if condition and here we'll type if options container has a class of active so this returns true if we have the active class applied on the options container so if that is the case then we want to focus our search box so here we'll simply type search box dot focus all right now when you click on the Select box we can see that the input box is already focused and we can start typing right away now the last thing to do is reset our input box so here we'll go ahead and type search box dot value and we'll sell it to blank and then we'll type filter list and we'll pass blank as the argument all right now when we click on this and if you type something and now when we click on it again we can see that it has reset so that's basically it for this video if you have any doubts you can ask in the comments below and click on the like button if you enjoyed this video and subscribe on this channel to get the latest video updates thanks a lot for watching have a nice day [Music]