Showing the Search Box

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Jafar Husain: Let's make this a little bit more interesting. Let's make it actually kind of mirror the types of things that we happen in applications. Because sometimes applications have come up and they have an auto complete box all the time. It's just up there in the corner, but maybe you've got an application where an auto complete box only appears when you open a form.

[00:00:21]
And then it disappears when you close that form. Right, so maybe you don't wanna have this autocomplete box around all the time, or certainly you might not want to hook up to that event all the time. In fact, maybe the autocomplete box doesn't even exist all the time.

[00:00:35]
What would it look like to open a form, and then begin listening to the auto complete box? And then close the form, and then stop listening to it. So let's zoom out just one level, because maybe your whole app isn't just this one form. Does that makes sense?

[00:00:50]
So what if I click a button, and then we open a form with an auto complete box in it. And then there's an x button and we click that x button and then we close that form. And make sure that we're no longer subscribed up to that text box event?

[00:01:00]
What happens if you have an event listener on a text box? And then you remove the text box from the dom?
>> Speaker 2: You have a zombie listener.
>> Jafar Husain: Right, what's happening is you might actually have the dom object still in memory right, because it's holding onto your closure and by extension you.

[00:01:22]
So, you wanna avoid that. So, what we'd like to do, is when we get rid of the text box we'd also like to kind of stop listening. We want to stop listening to our search results sets, observable. So let's make this HTML a little more interesting. I'm gonna have a button, which I click again this is not about design this class.

[00:01:44]
So I'm gonna trust you guys have the HTML chops to make this a lot prettier.
>> Jafar Husain: And we're gonna call this the search forum. And I'm gonna have a button, which is going to show this search forum.
>> Jafar Husain: We close this, we buy ourselves some room. So now, the search area is only going to appear when we click the search button.

[00:02:34]
So what should I do? If I want the the area to only appear when I click the search button. What should we do? What's the first step? Well what's the asynchronous API I'm gonna be working with in order to listen for that search button.
>> Speaker 2: The button clicks?

[00:02:53]
>> Jafar Husain: The button click right? So what should I do first? Should I just add an event listener to the button click?
>> Speaker 2: You should subscribe to the button clicks.
>> Jafar Husain: I should adapt the button clicks to an observable and subscribe to them, right? Now I mean maybe that may seem like overkill.

[00:03:09]
Because maybe all I'm doing is I'm just [INAUDIBLE] over this thing. And then displaying something, maybe there's no point in adopting it to an observable. Well let's see let's find out if there's a win her. So I'm going to go into script J.S. I'm going to you grab a search button referenced using document get element ID.

[00:03:27]
Does anybody know how to make auto complete darkness? Does anybody out there in the web know how to, because tab isn't working so that would be an awfully nice way to save me from some typing. And now just like we got key presses, we can also get,
>> Jafar Husain: Search button clicks.

[00:03:59]
>> Jafar Husain: And what's the last argument to form event?
>> Speaker 2: Click.
>> Jafar Husain: Click.
>> Jafar Husain: So first thing's first. What do I wanna do when search button gets clicked? All I got is an observable. What do I wanna do, and do is the operative word here, because I'm changing something.

[00:04:22]
When the search button gets clicked, what am I changing?
>> Jafar Husain: Well, let's go back to the index HTML. I've got this hidden div, which contains the search screen. And I want to show it when the searchButton is clicked. So, because I'm changing the dom, what I want to use is foreach.

[00:04:51]
Can anybody tell me why I would want to use foreach?
>> Speaker 3: Because your just going to do it once.
>> Jafar Husain: Well I might do it many times, right, every time somebody clicks search I want to open it. My point is as soon as I am changing something, an object that I don't own that I didn't create a global object.

[00:05:11]
I always want to do it inside of a foreach block, because when you're looking through your code and you wanna know where the code is that's causing some side effect to occur. Ideally, not always or some exceptions will come back to that, but ideally you should just be able to look at your foreach box and then you can see where all of the affects are happening in your application, right?

[00:05:31]
So why don't we start there? I actually I'm gonna call foreach,
>> Jafar Husain: And then every single time the search button is clicked.
>> Jafar Husain: I'm just gonna delete this now
>> Jafar Husain: I'm gonna go ahead and display the search green, which is named search one.
>> Jafar Husain: What's the opposite of none?

[00:06:21]
[LAUGH]
>> Speaker 4: Block.
>> Jafar Husain: Block? Thank you.
>> Jafar Husain: So let's see if that works. Search didn't work.
>> Speaker 5: If you go up to where you registered the button. Do you have that in quotes? From event.
>> Jafar Husain: I do. Thank you.
>> Jafar Husain: Let's run it. Now when I click search, we see our box.

[00:06:56]
Okay, now we want to be able to again not about design you get the picture it'll pop up a nice pretty dialog, but that's the idea with a little styles of CSS we can make this look little prettier. But we also when we pop up a dialog we usually have some sort of button to close it, right?

[00:07:09]
We wanna be able to like close that dialogue. Usually in X button in the top right? But let's just make it a little easier than that. And we can worry about the CSS afterwards or not at all. I'm gonna put a close button in here.
>> Jafar Husain: Okay and we're gonna stop and we're gonna save, we're gonna run again.

[00:07:39]
>> Jafar Husain: Okay, now let's make this close button work. Now the interesting thing is, this close button is always there, right? It's just hidden on the screen, but it doesn't have to work that way. I could actually remove these elements and only create them when somebody clicked search. So rather than just subscribing to the close button, why don't we only subscribe to the close button after we display the form, right?

[00:08:02]
Because then that gives us the flexibility later on to lazily create these dom elements, right? Does that make sense? Rather than have them on the screen all the time, because that uses a lot of memory, potentially.