Learn Alpine.js
Playing
17. Project - Hackernews search

Episodes

0%
Your progress
  • Total: 2h 10m
  • Played: 0m
  • Remaining: 2h 10m
Join or sign in to track your progress

Transcript

00:00
Let's pull together some of what we've learned and create an instant search which searches the Hacker News API.
00:06
Let's go ahead and start to perform a query here and see how it works and then we'll build this out from scratch. So I'm going to go ahead and start typing in here for AlpineJS. You can see a couple of things happening. We get a search status here, how many results are being returned,
00:23
the actual query that we're searching for and of course most importantly a list of items from Hacker News. Once you have completed this and learned how to do this, you can apply this to any search API. So let's start to build this out now from scratch. So we're going to have an overall search component.
00:42
So this is going to be the data in here to initialize this and inside of here. We're pretty much going to look at what we looked at before. We're going to have a query and we're going to have a set of results that come back from that API. We're also going to have a perform search method which of course will perform the search
01:00
and then we can hook up an input just down here to start typing into. We'll get rid of the name and ID just for now because we're playing around, but let's use X model to hook that query up. Now let's look at the status that we saw earlier.
01:13
As we type it tells us what we're searching for. So we're going to go ahead and just create a paragraph in here. We're only going to show that on the condition that the query length is filled. So we'll just say query length and let's say your search for X returned X or Y results.
01:33
So we can fill in the X here. That's pretty straightforward because we already have the query. So let's go ahead and use X text here to pass the query in and that should be enough. Let's go over and check it out. So when I type Alpine JS you can see that automatically updates. Now we don't have any know how many results we've got at the moment
01:51
because we've not actually sending this request across. But of course what we can do is we can still go ahead and use results dot length. At the moment that's just going to be zero. So I can go ahead and start typing again and we just see zero results which is fine for now.
02:06
So let's look at actually performing the search here. I'm just going to grab the hack and use search API over from my notes, which is the following. This uses Algolia and the search takes in a query which we can just assign in here from the query that we have.
02:23
So that's pretty much what we want. Let's go ahead and use native JavaScript fetch to grab these results. So let's paste this in the query. Of course, we're going to replace out with the query that we get back into perform search
02:37
that we saw in the last part. And then once that request comes back, we can take the response and we can make sure we have that back as JSON. And then once that has finished, we can go ahead and assign that to our results. And that makes it really easy to iterate through.
02:54
So once them results come back, we go ahead and set our results to results dot hits. Now, let's just take a look at this first of all. So I'm going to go ahead and get rid of these two lines just so we're completely clear and let's see what happens when we perform the search.
03:09
Of course, we need a watcher to watch that query. So let's go ahead and say watch. Let's watch that query. When we get that query back from there, which we can add into here, we can go ahead and call this perform search and pass the query in.
03:25
Let's just keep an eye on our network tab just to make sure that this request is actually going through. So let's search AlpineJS and you can see sure enough, we are making a huge number of requests to that API. We're going to look at debouncing this in a bit, but let's get this working first of all.
03:40
So these are the hits. So we get back this object here and the hits contain objects for each of the results. So that's why a little bit earlier we used the following and that will bring back them hits and assign it to our results. Great. So let's go ahead and try this out now.
03:56
We're going to go ahead and search for AlpineJS and you can see sure enough, we get 20 results. Now, this is limited to 20 results. We could change that. If we search for something a little bit more specific, AlpineJS A, B, C, you can see that the results do go down. So that still works.
04:12
Okay. So let's go ahead and output the results just under this paragraph. I'm going to create a div just to wrap this. You'll probably have some styling on there. And we now want to iterate through each of the results. We know that to do that, we need a template element.
04:24
And then on this, we use X for result in results. Now, remember, we need to key this. We looked at this earlier and the reason that we should. So we're going to go ahead and use result and object ID. So that exists within that payload that we get back.
04:40
If we just perform a search really quickly, we get the, we just come down here to each of the results. We get an object ID so we can use that to uniquely identify each of these in this iteration. So let's create a div out here for each of our results. We'll create a H4, use X text in here, and we'll say result.title.
05:04
And again, just to find these out, you just want to look inside of each of the results that we get back. And then an anchor maybe to click through to this result. So inside of this anchor, we want to display the URL perhaps. So let's say result URL. But we also want to bind the href to that.
05:25
So we can say X bind href result URL. Great. So let's go over and try this out. Let's search for AlpineJS. And there we go. There are our results. And of course, we can just click through now. That's going to go through to the link that we expected.
05:42
So let's focus on a couple more things. The first thing I want to do is search for say AlpineJS and then get rid of this. And you can see that by passing in an empty query, we get a list of results. And I'm not sure how these are kind of ordered. So what we want to do is preferably get rid of these if there are no query or if there is no query.
06:02
So what we can do is inside of this watcher, now we're doing this directly in here, we can not perform the search if the query is empty. So let's go ahead and check for an empty string in that query. And if that's the case, we can just reset the results back to an empty array and then just return.
06:18
So we don't go ahead and perform that query again. Let's go over and check this out. I'm going to search for AlpineJS and I'm going to get rid of it and our results disappear. And more importantly, we don't perform an empty search. Now because the hack and use search runs on Algolia, it doesn't matter if you are making all of these requests.
06:37
Algolia is fast enough to allow you to have real instant search like this. But if, for example, you didn't want to send a request for every single character you type, you can use a debounce on the input. Let's go down and check this out. Here's our input and we're using X model in here to hook this up. What we can actually do is rather than update the query value in our component for every time we type,
07:06
we can actually use debounce on this. Let's check this out and see what it does. So I'm going to go ahead and start typing Alpine. Notice it's just made one request. Debounce, if you're not familiar with it, allows a slight delay in between typing. So if I was to type really, really slowly, that will send a request for every single character.
07:26
But if I type really quickly or my normal typing speed, it will have that slight delay before it picks up on the new value. So we can adjust this by using another dot and then choosing the milliseconds that we want to use here. 200 is about right for search. So I can start typing Alpine. You can see it has sent a few requests and I did a backspace there, but we're sending significantly less requests.
07:49
So if you're sending a request to your own API and you want to limit how this updates or how many requests are actually sent, debounce is your friend and you just use that on the model. So in not too long, we've created out a search experience that hits an API and brings back and displays the results. Of course, we've not styled it up, but I'll leave that up to you.

Episode summary

In this episode, we're applying everything we've covered so far to build an instant search feature that connects to the Hacker News API! We kick things off by demoing what we'll be making: a search box that shows live status, the current search query, and a list of results as you type.

Next, we dive into building our own search component from scratch. You'll see how to manage the search query and results in your component's state, wire up inputs with x-model, and show live feedback like the number of results found.

Then, we pull in the Hacker News Algolia API using JavaScript's fetch, and make sure the data we need from the API gets mapped into our search results. We talk about setting up watchers so that our search fires off automatically as the user types—and how (at first) that can mean a ton of requests!

To make our app more friendly and efficient, you'll learn to conditionally hide results when there's no search query and how to avoid making empty searches. And of course, we talk about debouncing—adding a small delay before firing off a new API request—so your search doesn't overload the API with too many requests.

By the end of this episode, you'll have a smooth, real-time search experience powered by an external API. We've kept the styling basic so you can focus on the functionality, but feel free to jazz it up however you like!

Episode discussion

No comments, yet. Be the first!