Original subtitles

Next we refactor we're going to do is four on option select.

So in other words we're going to pull out all the logic that decides what function to run whenever user

clicks on an option.

So to do so I'm going to go back over to auto complete J.S. and we're going to find inside of here the

code responsible for doing something whenever a user clicks on an option.

So I to scroll down a little bit inside of an input inside of there is our form of loop.

Once again and then inside of there after we create our option we attach that event listener to this

right here.

This function is what's going to run after user clicks on the individual option.

Now it's something to be aware of inside of here.

The first line like removing that is active class.

That's something that we want to have happen regardless of what goes on in other words no matter what.

Whenever user clicks on an option we always want to call it closed the dropdown.

So we don't want to just kind of extract that function right there somewhere else.

Instead we only want to extract some parts of it.

I think one part that we very definitely like probably very clearly want to extract to be on movie select

right here is that is what actually decides what really happens or what goes on whenever a user clicks

on the button but the line that is kind of questionable about whether we need to extract or not is where

we set the inputs value with the movie title half of this line.

In other words like that half right there is very much appropriate for keeping inside of this autocomplete

file because it is related to how the autocomplete works and we probably want it to work the same way

regardless of whether we're showing movies or recipes or blog post or whatever else but the source of

it.

In other words movie title that part of that it line or that expression is very much customized for

the type of resource we're working with.

If we weren't working with movies then instead this line should probably be something like log name

or something like that or recipe name but in every scenario we definitely get to take whatever that

value is and throw it back into the input value.

So this is kind of a more challenging refactor and we're going to have to think about exactly how to

handle that right now.

It's probably pretty obvious that we definitely want to extract the callback right there so at a very

minimum let's make sure that we create and pass in some function called like on option select on our

config object and inside there we'll make sure that we call on movie select to back inside of index

dot us years create autocomplete going to pass in a another function called on option select I'm going

to expect that this is going to be called with whatever object that the user just clicked on and I'm

gonna call it movie then inside of here we can do the same exact thing that we did before where we call

on movie select so call on movie select and pass through the movie

then we can go back over to our complete J.S. at the very top once again we can d structure off that

new function which we called on option select and then back down at the event listener that we're just

looking at instead of calling on maybe select right there directly instead it will be on option select

and this might seem like a very insignificant change right here.

Right.

Like what we just change the name of the dropdown or the callback function.

Who cares.

Again the entire point here is that if we had some scenario where we wanted to call a different function

right there if we were using our autocomplete on another application we would have had to open up the

source code for our autocomplete and change that line of code which hundred percent not good.

We don't want to have to edit the source code of autocomplete J.S..

So in doing this change we've extracted deciding what to do when a user clicks on something into this

configuration option over in index dot J.S. which is going to contain all of our application specific

code.

So I know this seems like a smaller change but it still is pretty meaningful.

Okay.

So now the other thing we need to be aware of that we discussed this line right here.

So again the left hand side it needs to happen for every instance in which we use not complete but the

source of information is really well that's kind of application specific.

So I think that we need to pass in a another helper function to our config object.

And I think that we need to use that to decide exactly what value to assign when a user clicks on something

so back inside of index dot J.S. I'm gonna add in another helper function.

I'm going to call it input value the goal of input value is going to be to take a movie and after a

user clicks on the option we're going to call input value with the movie and we're going to return whatever

value it should show up inside of the input.

So I'm going to return movie that title.

So this is how we're going to extract the logic out of autocomplete J.S. it's not to use that will go

back over to autocomplete J S again rather than directly referencing movie title I will instead call

input value with the movie up inside of our config object up here at the very top of the file.

I'll make sure that I also extract input value from the config.

All right now we'll not see on repeat really quickly here.

We still have many references to movie inside this file and so it might seem like we're making no progress

in actually making this thing reusable again.

We are going to eventually come back through and replace the term movie with something else that will

be a little bit more consistent.

So we got one more step forward let's do another test or refresh a search for Avengers a click and it

looks like the input value still gets updated correctly.

That's very good.

Let's not take one more pause and try to finish up this refactor in the next video.