Making our Search Results Functional with Unpoly

In This Lesson

We'll install and configure Unpoly to handle our search form's submission. We'll then server-render the search's results using EdgeJS and return it back as our response for Unpoly to swap in-place directly in the working document.

Created by: @tomgobich
Published: 11 months ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

search results load into the exact same document of our search bar, rather than this brand new document.
So we want them listed just underneath our search bar here, which we can easily do just utilizing attributes and unpoly. So let's go ahead and dig into our terminal here, stop our server, because what we want
to do is npm i to get unpoly installed. All right, great, we can go and boot our server back up.
And then let's jump back into our text editor, because we want to dig into our js app.js file now. And we can go and get rid of that hello world.
And let's instead import unpoly, which will add an up variable here for us to use tacking
that onto the window so that we have it available from our markup as well. And unpoly also comes with some styling because it does integrate layers.
And that includes modals and things like that. So we can go ahead and import from the unpoly namespace unpoly.css as well to get those included.
And there we go. That's all that we need to get unpoly set up. And although we can have this automatically handle all of our documents, links and forms,
which if we were to do that, it would make our document handle more like an SPA, where we're re-utilizing the exact same document over and over again, despite us navigating
to different pages and URLs. By default, though, it's just going to apply to the specific elements that we add unpoly to via its attributes.
So within our search index page on our autocomplete form here, that's exactly what we want to do.
So let's add an additional attribute onto our form called up submit and set that value to true.
And just by doing that, unpoly will now handle this form, which will keep us within the exact same document. And in addition to that, we can also have it auto submit the form anytime that the form
value changes. So we do auto submit there and set that to true as well. Now a couple of things to note here, we shouldn't need up submit if we have up auto submit,
but I'm going to go ahead and leave both here for explicitness. And also by adding up auto submit onto our form, anytime any of that form's input values
change, it will auto submit this form. We can, however, also apply that to just a single input if we only want that behavior on the form for a single input.
Here we only have a single input inside of this form, so it doesn't really matter which one we apply it to.
Conversely, we can also add a debounce or a delay to that auto submission as well, utilizing an attribute called up watch delay.
And we just set this to the number of milliseconds that we want to delay that auto submit to, in this case, debounce the form input submission.
So now we won't have a request go out for each and every keystroke, it will instead be debounced for this 300 milliseconds, and then we'll get an auto submit.
And then this one is an unpoly thing, but we also want our form input to not have the browser's autocomplete list, because then that would overlay on top of the autocomplete
list that we're going to end up having with our search results. So we'll add in an additional attribute for autocomplete to just turn that off.
Alright, we're not quite done here, but let's just stop and take a look and see exactly what we have thus far. So let's jump back into our browser real quick. And let's send off our search for Martha yet again.
And we see without having to enter anything, our form automatically submitted. And now rather than getting a plain unstyled list, we now have our styled autocomplete
list here utilizing our tail and CSS classes. And that's because we're now in the exact same document rather than a different document, meaning we still have our style sheet applied.
It did, however, overwrite all of the pre-existing HTML within that document. So if we take a look at the body here, it goes straight into our UL with our search result
list and our form is no longer anywhere to be found. And that's the native behavior of unpoly.
If you don't specify a specific target, it's going to roll up to either a div specified as the up main via an attribute or the body itself.
So we don't have that up main here. So we went all the way up to the body and replaced it with our requests response.
So if we were to reload our page, and I'm going to leave the console open here, do our
search for Martha again, we see our post request go out now rather than an actual HTML form submission.
And what we get back as its response is the exact same thing that we have been seeing all along. It's just this UL markup that is now taking up our entire document.
So what we want to do is specify that this HTML should go into a specific div rather than replacing our entire body content of our document.
So back within our text editor, first, what we want to do is within our form group, which we've added the class relative to, we want to add a div to serve as a placeholder for
where our autocomplete results should go. So we'll do a div with an ID of autocomplete list, and we can just end that div out.
We don't need any contents inside of it. This is the div we're going to replace with our unpoly results.
And we just want to tell our form to target that div with the results utilizing an up target attribute.
So we just set that to our autocomplete list selector. Now we're almost there. In addition to setting the up target on our form, the response that we get back with this
form submission needs to also have a matching target so that unpoly can match them up one to one for the replacement.
So within our actual fragment search autocomplete file on this wrapper div, we also want to give it the ID of autocomplete list as well.
In addition to that, we can also add in a class to this with BG white, make it absolutely
positioned so that it actually appears as an autocomplete dropdown rather than being statically there just underneath our input.
So we'll add a couple of just style-based classes there to aid with that. All right.
So if we give that a save, jump back into our browser, let's try our Martha search one more time. And perfect. There we go.
We now get our autocomplete results just underneath our search bar appearing as an actual dropdown. And we're within the exact same document that we applied the original search term to.
So if we take a look at our console, we can see our post request right there. And all it did was replace our autocomplete list div with this result set right here.
So if we dig into our HTML, let's just go to our input there. We can see our autocomplete list here now has our class applied in all of our list items
inside of it. Since we added a max height to this, this is also a scrollable list. I'm going to close our dev tools out there and let's take this a little step further.
So let's actually treat it like an autocomplete dropdown list, right? So if we click away from our input and away from this result set, we should have the
actual result set hide away and then come back into focus if we re-enter the input bar. So we can sprinkle in some AlpineJS, which is already installed from this project via
that jumpstart package to do exactly that. So within our search page, we'll add in an Alpine variable called open that should discern
whether or not the actual dropdown results here that we have in this fragment should actually show. So we can do an x-show and set that to this open variable that we'll create here next.
With that set, we can jump into our search index page and within this top div, which wraps everything, including our result set, we'll add this x-data attribute.
We'll define our single variable of open and default it to false. If we click away from this div, which again includes our results, we can go ahead and
set that open variable to false so that we can do that via at click dot away equals and set open to false, just like so.
And then lastly, whenever our input is actually focused. So we'll add an at focus attribute. We can set that open variable to true.
So if we give that a save, let's jump back into our browser, do another search. So let's try hello. All right, great. We see our autocomplete list now show up here with our results.
If we click away from that div, our results hide back away. If we focus back into our search bar, the result set comes back.
Perfect. Now it's actually acting like a search bar. What we want to do next is rather than just searching our books, we'll actually implement
our multi-search to search against our books, authors, and genres.

Building A Multi-Search with Meilisearch & AdonisJS

12 Lessons

1h 38m

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.