Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- What is AJAX?
- Making requests asynchronous
- Updating the DOM with getElementById
- Reading JSON files
- Working with jQuery and AJAX
- Sending and searching JSON data
- Incorporating CSS transitions
Skill Level Intermediate
So we have events like change(), dblclick(), error(), et cetera, et cetera. The one that we're interested in is the keyup() event, an event that happens when somebody releases the key on their keyboard. So let me come over here. I am going to target the input field with the ID of search. Then I am going to bind a keyup element-- this is the jQuery version--and I'll execute a function literal. That function literal will have everything that we did previously. So all the stuff will go right there. Let me indent that a little bit, and I am going to save this.
I will switch over to my page, and I am going to reload the page. Nothing will be showing. As soon as I click right here and start typing something in, then my JSON document will load. This is not really searching anything, but it prevents the display of the JSON data until I type something in the search box. So now it's time to narrow down our results. To do that we're going to need to be able to get the text the user is typing, so we're going to create a variable for that.
Search takes a string and looks for another piece of text inside that original string. If it finds it, it returns its position. The string method can search for either some text inside another string or use a regular expression. If you search for some text, it will do a case-sensitive search, which is not what we want. So when somebody types a lowercase b, it wouldn't find Barot, because that user has a name that starts with a capital B. And that's not good. Regular expressions are sort of like search on steroids that let you do case-insensitive and more powerful searches.
I am going to need just a very simple regular expression, so let me do that right here. I'll get rid of this console.log, and I'll call this my expression or myExp, and that's going to be a new regular expression. That's going to take in our search field, and it's going to use the case-insensitive search if I type i in quotes right here. Now that we've got these two variables, we can use the search method like this. I am going to wrap this around the list of output items right here, and I will type in if the value of name from our data file and then execute a search passing it a regular expression. The one that we created is called myExp.
If that is not equal to -1, it means that it did find that text in the data. So if it does, then I can output all the stuff. So let me go ahead and save this, and I'll go back into my application and I will reload. I will start typing something in here, and you'll see that it is producing the search result. So let me close this out so you could see it a little better.
There's all my search results right now. It's pretty much everyone. So if I type in a name, like I will type Ferrar here, it finds that second field. I will just do that a little more. It is dynamic, so it's narrowing things down as I type in more and more text. That's pretty good, but right now it's only finding things in the name field. So I also want to check for the Bio field. I can just take this, and I'll add another set of parentheses here and an or symbol.
Paste that other copy of it and change this to check the bio field. So this says look for the regular expressions in the name or in the bio field. I will save that, come over here, we'll refresh, and we'll try something like media, because I know some of these people have the keyword media, or maybe something like art, and now that's working perfectly. So our Live Search functionality is working great, but it doesn't look very hot, so in the next movie I am going to add a little bit of styling.