JavaScript Autocomplete

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone, and welcome to another episode of Learn With Jason. Today we have on the show the one and only Sarah Dayan. Thank you for being here.

SARAH: Thank you for having me, Jason.

JASON: I realized I didn't check pronunciation. I hope I wasn't too terrible on your name.

SARAH: That's close.

JASON: Can you say it so people can say it properly.

SARAH: That would be Sarah Dayan.

JASON: Dayan. Sorry about that.

SARAH: That's fine.

JASON: So, I'm thrilled to have you on the show. I've been following your work forever. You've been prominent in the community. I'm super excited to get a chance to learn from you. So, thank you again for joining. For people who aren't familiar with your work, do you want to give us a little bit of a background on yourself.

SARAH: Yeah, sure. So, I'm a software engineer. I've been doing software engineering for more than a decade now. I specialize in front end. I've been doing that for probably the most part of my career, and currently I work at Algolia, which is a search company which you probably saw on any documentation website out there. So, yes, that's one of the things we do. Yes, and I work in the developer experience chapter of Algolia, working mainly on documentation. But recently I've hopped on the autocomplete project, which is what we're gonna talk about today. I hopped on that project that was started by some of my brilliant co?workers, and, yeah, I just fell in love with it. Fell in love with the V1 that they were cooking. That's why you have me on today. I think ?? I hope you will be thrilled.

JASON: I'm sure I will be. Not least of which because I feel like autocomplete is one of those ?? it's one of those dragons that every front end developer ends up having to slay at some point in their career. Thank you for the sub, Xander. Welcome to the stream. Autocomplete is notoriously hard. You end up in this experience where I have a bunch of data, I want to search it, and this is easy when you've got four or five things and you want to do type ahead. If I've got thousands of pages or hundreds of thousands of pages and I need to search for content, that's ?? it's hard. It's so hard to make that performant. So, do you want to talk a little bit about, I guess, you know, what has been the hardest part about this and kind of how have you overcome that challenge?

SARAH: So, there are many parts that make autocomplete hard, but, yes, indeed, that's one of those dragons, as you say. And usually when you want to whip up your own, which seems easy at first, you quickly realize that, yeah, making something work is probably fairly easy, but having something production ready is extremely hard. Autocomplete is really dynamic. It's something that will react to what you type. You type faster than you click. You type and it has to update. There are so many layers of complexity. The first layer is probably the accessibility of it. Creating an autocomplete that is accessible and compliant with specs, first, that is really hard. Then you have all the parts about how do you fit it with whatever you want, whether it's synchronous or asynchronous, but then you have all the matters that come on top, which are more UX related. Let's say you have many different sources and those different sources are asynchronous but they don't respond at the same time. How many times do you want to flash the UI? Do you want to wait a little bit? Do you want to wait for everything to be done? Do you want to have some kind of threshold? Et cetera. So, all those kinds of concerns you realize whenever you start going deeper into it and you want to build something that is really production?ready and great and that people will enjoy. Whomever uses it. Whatever their ?? yeah, the ?? whatever the way they use their internet. Whether they use a lot their keyboard or their mouse or whatever, you realize that it's probably a project in and of itself. Kind of ?? I would say kind of like search, you know?

JASON: Yeah.

SARAH: When you start building your own search, you realize maybe that's not such a good idea if I want to get something that is, you know, customer, like, industry standard.

JASON: Right.

SARAH: Probably that's not the best idea. And I would say the same for, you know, building your own deployment platform or anything. Yeah, maybe you can whip it up yourself with AWS in one afternoon, but having something robust that will handle everything and anything that you can think of is probably not worth your time. So that kind of was the idea behind building this library. And it's been around for a while.

JASON: Yeah.

SARAH: The first version of the autocomplete library I think dates back to maybe five or six years ago. At least at the beginning ?? the, like, very early days of Algolia. And it stayed in V0 for a while. And back then, it was like I think it depended on Zepto or JQuery, which made a lot of sense back then, but then we kind of left it on the side.

JASON: Right.

SARAH: And so I think it probably was a year ago or more. My co?worker, Francois, decided just to get into it and like, all right, we've been V0 for five years. Maybe it's time for a stable version. Especially because that's ?? like we do search and that's a really valid concern. Like people want to build autocomplete search experiences.

JASON: Right.

SARAH: And we offer a lot of UI components. UI libraries. The autocomplete is what you associate with search. Streaming on Twitch, there is an autocomplete using Algolia. On Slack, you see an autocomplete when you do your search. On Amazon, you have an autocomplete. Whenever you use ecommerce, the common pattern is that you have an autocomplete and then it leads you to a search page where the pull page is dedicated to that, but usually when you think about search, you think autocomplete, and that's probably the most versatile, portable UI component that you can associate with search. So, of course we had to take care of it.

JASON: Absolutely. And, like, thinking about it, I, you know, if I really think about the way that I use the internet, I rely on autocomplete so heavily. Like when I go to Amazon, I don't usually know what the thing is that I want. I kind of have a word to describe it, and so I'll put in a word, and then the autocomplete helps me narrow down what I'm actually looking for. Half the time I go to Google, I don't actually know what it is. I start typing a phrase and then the autocomplete helps me figure out what it was, like, the other day, I was trying to search an actor. I couldn't remember the movie or the actor's name, so I was like guy in movie about thing and it, like, Google figured it out for me. The autocomplete saved my life. I do the same thing with food selection, you know? I start typing in the name of a restaurant and the list helps me pick what I'm gonna eat tonight. So, autocomplete is such a critical thing, and to go back to something you said earlier that I think is so ?? it, like, it's kind of a gut punch as a Dev. Some of this stuff is so easy when it starts. You get your proof of concept and you feel, wow, this is, like, I'm the greatest Dev alive. I can build anything. And then you start looking at production readiness, and it ends up sitting on the back burner forever. You just don't ship that feature. I am personally guilty of this. I don't have a search on Learn With Jason because it's too hard for me to build. So I just don't have it. I'm like, ah, people will use Google. That's a personal thing to do to people is to say, well, it's hard for me to build this thing, so I'm not gonna put it on my site. So what I'm really excited to learn about from you today is how, you know, how can we make this work? Like we've got 90 minutes. We've got 82 minutes left here, and I'm pretty sure we're gonna be able to do this. We're gonna be able to build an autocomplete box with real data from a real website, and that is unbelievable compared to how much work it would take for me to try to roll this on my own and do all the UX things that you mentioned. All of the considerations around accessibility. The considerations around, like, just making this thing comprehensible. So, yeah, I'm really, really excited for this one.

SARAH: Yeah, and as you said, like, we're developers who usually we want to do things our way, and we want things ?? we want to build them because it's fun. Oh, that's your project, you know? That's your personal project so you want to work on it. You want to build things. You want to craft things. But, indeed, the problem is that sometimes we get into those problems that we think are easy and we hit a roadblock, realize that we did not see the forest behind the tree, and, like, yeah, let's drop it. And I think that's what's really interesting with that API era or, you know, SaaS era that allow amazing features. You can have search, deploy as a service, anything and everything, and the challenge ?? and I think we're going in the right direction in general as an industry, is to provide enough customizability so that people want to use it. Because I remember a couple years ago the kind of UI libraries that you could find, you had to go with the UI that they gave you. You wanted, like, a comment section on your blog or whatever, yeah, you have to go with the ?? with the UI that they give you. Just, like, JavaScript snippet and it's going to load something from the outside. If you wanted a form for subscribing to your newsletter, if you wanted a chatbox or anything, you have to comply with the UI that they give you. And, personally, I know that I don't want it. I don't want anything that doesn't look exactly as the theme that ?? like when you spend weeks, like, months crafting your UI and making sure that, you know, the contrast is great and et cetera, you don't want something that looks like ?? that is obviously not ?? that does not belong to it.

JASON: Right.

SARAH: So, yes, I guess that's probably the challenge right now that service companies like Algolia need to tackle, and I think that's definitely what we do and where we want to keep on going, is to make sure that we are relieving people from the pain while giving them all the power. And that's a really difficult balance to strike, but at the same time this is fascinating.

JASON: Yeah. Welcome, Ben and Raiders. You came just in time. We are talking about autocomplete using Algolia and just all of the things that make it challenging and all of the things that Sarah and her team are doing to make it more approachable for us and give us a lot of power. I love the way you put that, that you want all of the power and is, you know, none of the restrictions. Like that's ?? I really think that is ?? that's at the core of a lot of developers, right? Like we want to be able to do whatever we want, but we don't want to have to do everything, and so finding that right balance of here's the functionality, but the restrictions are light enough that you can still make it do whatever you want is really, really powerful. So, with that being said, I think it might be the right time to switch over and start actually writing some code because I'm just really champing at the bit to see how this works.

SARAH: Yeah, let's do it.

JASON: Let's switch over. I'm gonna get to the pair programming view. And, and first and foremost, let's do a quick shout?out to our sponsors. We've got Jordan here today from White Coat Captioning writing down everything that we say. Thank you very much, Jordan, for being here. White Coat Captioning always trying to make the show a little more accessible. That's made possible through the support of our sponsors, Netlify, Fauna, Auth0 and Hasura are all kicking in to make the show more accessible to more people, which I appreciate quite a bit. Also, while we're looking at websites, go ahead ?? oh, yeah, if you want to look at those captions, they're on the homepage. We're going to lose everything in the sea of boops, but you can also go and follow Sarah on Twitter. This is @frontstuff_io. Make sure you go and do that follow. It's a fountain of information. And we are going to be working on autocomplete today. So, I'm going to drop a link here for autocomplete. All of these will be in the show notes at well. I know that they're scrolling off screen real fast here. They're gonna get us. Yep, we're drowning. That's it. It's over. (Laughter)

SARAH: That's the best. I love it.

JASON: This is what happens when Cassidy and crew show up on a stream.

SARAH: We're being ??

JASON: Boop DOS'd. Nicely done, chat. You have successfully buried us. All right. If I wanna get started here. Here is our autocomplete. Boop DOS. Yeah, good job. So, looking at this, I don't even know where to start, right? So, right now what I have is an empty folder. I've got nothing in it and I'm ready for us to do our first autocomplete project. What is the right step one?

SARAH: So, the first step really would be to create a JavaScript project. We want to have something to run a server. Vite is probably the best solution. You can run it from JS Developer and it would work.

JASON: Oh, nice.

SARAH: So, we're gonna use Vite and do it with the Preact template. The reason we're going to do it not because we're going to use React or Preact. What we're going to build is a really vanilla JavaScript autocomplete. With Preact, React, whatever uses ?? but, yes, the thing that you need to understand is that autocomplete JS works with a virtual ?? this is a visual library you need to be able to pass templates, and the choice we've made is that it would be using the virtual Dom. So, the easiest way to write VNotes is going to be with JSX. The reason we want to use Preact is to have it act as our JSX run time.

JASON: So sorry, I screwed this up and implemented a project inside of a project. So I'm just doing it again. We'll get this in here. We'll get this set up. We have our Vite project. So I'm going to install ??

SARAH: Neat.

JASON: And now gonna open it up. And here we go. We are in VS Code. It's in the wrong window. Get over here. There you go. All right. So, we're looking at a pretty basic setup here. We've got ??

SARAH: Yes.

JASON: ?? simple config. It's using Preact there. Our index just has an App ID and then it looks like we have an app.jsx, it pulls in a logo and a little bit of paragraph. And that's it. That's the whole app.

SARAH: All right. That's pretty cool.

JASON: Yeah.

SARAH: So I think if we look at the Vite config quickly, we probably have all the ?? yeah, we have the Preact plug?in, so we won't even need to import, you know, the create element thing from Preact, so that's gonna be cool. So, maybe the next step would be ?? the easiest would be to go under getting started of the documentation, and we're gonna follow it step by step. Here you are in what is Autocomplete and then you have getting started. And here it will basically tell you, yeah, how to start building it. So, we're gonna start by installing Autocomplete JS. We don't have React, we have Core and JS. On top of that, you can build it with anything that uses a V Dom. So, again, Vue, React, and if you're not, you can use Autocomplete Core and then you can use it with Angular anything not using a V Dom.

JASON: Okay.

SARAH: So, we have the dependency. Cool. What would be the next step then from the docs?

JASON: Let's see. There's a theme.

SARAH: Yes. So, that's the theme that we provide. So, we want it to look good right away. Of course you can override that. What we recommend is that you start from the CSS that we wrote and that you customize it because we provide templates that will look good already with the classic theme.

JASON: Got it.

SARAH: And then we're going to import it in our application. So, we have the main. I guess we can open the app. Yeah, either here or in the app, we don't really care because it's just one side effect.

JASON: Okay. Let's drop it in the app.

SARAH: All right. Let's go back to the docs. All right. And then, okay, so that would be the first step. So, what's gonna happen is that when you instantiate autocomplete, it's going to be doing exactly what you can expect from most UI libraries, is that it's going to populate a target, like an HTML target that you pass it. So, we're going to maybe replace our app that we have in the HTML with this ?? with this one. It

JASON: Okay. So let's just make ourselves a little ?? oops.

SARAH: So, you will want to go in your index HTML in that case.

JASON: Oh, the index.html.

SARAH: Yes, exactly.

JASON: Okay.

SARAH: I think what we can do is override this app, and we're going to paste ?? instead of the app, the Dev ID App that we have in line 10, we're going to replace that with the autocomplete one. App.JSX ?? we have main. So the main is probably doing something.

JASON: So, main is kind of loading our styles. And then just mounting things. So, do I need to change this to autocomplete?

SARAH: Yeah, I think we're going to work directly in main in that case, and we don't need that line 5. We're just going to instantiate autocomplete.

JASON: Oh, I got you.

SARAH: You can remove that. We probably don't even need render prom Preact. Yes.

JASON: Got it. So, we're getting out of Preact entirely. Okay. Good, good. That works.

SARAH: Yes, exactly. The index.CSS is probably not needed the same way.

JASON: Okay. Keeping it real simple. I'm into it.

SARAH: Yes. And so here, let's move back to the documentation.

JASON: Okay.

SARAH: So that would be the really most boilerplate that you can have.

JASON: Okay. Should I set this up?

SARAH: Yes, and we can break it down quickly together once you have it copied over.

JASON: Okay.

SARAH: All right. So, first, we're importing autocomplete. That's fine. Then we're importing the classic theme that we saw together and then we're instantiating autocomplete, right? So, linked in our index.html. So, autocomplete will run and then it's going to take over on that ?? on that container. We pass the ID to the container. We have a placeholder, and we have get sources function, which right now returns only an empty array. So, maybe you're starting to see what ?? to see where it's going. This is where later on we're going to put all of our sources so we can display whatever we want in the autocomplete.

JASON: Great. So I can ??

SARAH: I guess we can ?? yeah, we can start building. Or at least running the Dev server.

JASON: Okay. So, this is now running at 3,000. So, if I come back out here, that's the wrong window. Here we go. This window. And I run 3,000.

SARAH: Okay.

JASON: Hey, look at that.

SARAH: And, boom, it works. You have ??

JASON: There's nothing in here, so there's nothing to autocomplete with, but ??

SARAH: Exactly.

JASON: ?? that's pretty slick for how quickly we got what looks like a nice search bar.

SARAH: Exactly.

JASON: Focus styles and there is not really anything for me to do with accessibility controls just yet, but that's pretty slick.

SARAH: You can clear ?? you can actually clear the query. You have a button for it. So, if you did not want to use your keyboard, you could do that. If you maybe resize your window, you're gonna see that it can be styled for mobile, but it's gonna be even more interesting later on.

JASON: Ooh, nice. Yeah, that's great.

SARAH: That goes full screen, et cetera. So, you will see there are a lot of little really sleek, really interesting patterns that we can ?? that we can see later on once we have some data in that.

JASON: For sure.

SARAH: So, maybe the next step ?? so, let's go back to the docs.

JASON: Getting started. This is the one that we want.

SARAH: Yes, exactly. So, what would be the next step? I think we are ready to define the items to display. So, let's look at this code snippet together. Here, maybe I can break it down a little bit so it's easier to understand. You have an Algolia index, right?

JASON: Mm?hmm.

SARAH: Right. So, what's gonna be cool is that you can display anything you have in your Algolia index in your autocomplete. You can also use autocomplete with whatever you want. It could be static and we can see that later on. You know what, actually, maybe let's see it right now.

JASON: Sure, yeah.

SARAH: Let's create a static source just so that we can have quickly something that works. So, let's maybe ?? so, look at the get sources. If you look at the get sources function you have in the snippet, you can see kind of the shape of it. That returns an array, and that array returns sources. And basically what a source is, you have a source ID, which is just the identifier for for the source. You have a get items function that returns items, so an array of items, and then we're going to provide templates so we can render every item. So, let's do that together. We're going to do it live and without documentation. It should be easy enough.

JASON: I love it. I love it.

SARAH: All right. So, let's go in the return. We're gonna do ?? we're gonna create an object and we're gonna pass it a bunch of properties. The first one is going to be source ID. Yes. And you can pass it whatever string you want. It can be main or whatever you want.

JASON: Okay.

SARAH: All right. Then we're going to have getItems, and this is a function. And this function returns an array of items. So, an item can be of the shape you want. It will be an object, usually. So, let's maybe have a label and we're gonna do Netlify. All right. And a second one will be Algolia.

JASON: Okay.

SARAH: So, that would be a second item. All right. Awesome. And now we're gonna pass a third after get items, which is going to be the template. Right now we're returning the items but don't have any ??

JASON: I just realized autocomplete works. That's really nice.

SARAH: Nice autocomplete on VS Code as well. Templates is an object, and you can pass several templates. The one you are interested in right now is item. Item is a function.

JASON: Autocomplete has changed my life, like being able to just do the ?? oh, it's amazing. Okay. So, item is a function.

SARAH: Yes. And it's provided with a bunch of things, but you can already ?? so, inside of the parenthesis, you can structure item.

JASON: Okay. Like this?

SARAH: So you will have access to the item. And you can return item.label.

JASON: So, this is ?? I can choose any string that I want to come back, and that's what will show up in if the autocomplete result?

SARAH: Exactly. Like, really, there is no magic. You really ?? what you see is really how it works. Right now, we have templates and, like, it's an object of functions. And for whenever we want to display an item, we're going to run this function, pass the items and that's how it works. So, that's how it works. It's really straightforward.

JASON: So, this works?

SARAH: Yes, this should work. If you use it right now, it should work. If you start typing something ??

JASON: Look at that. So, li is in both Netlify and Algolia.

SARAH: So, right now it's not filtering on anything. We're showing everything.

JASON: No, it's not filtering.

SARAH: We're not using Algolia. We're not using search. Let's do it. That's gonna be fun. Let's do our own search system like we're rebuilding Algolia. So, this array that we're returning it, we want to filter it to that it only returns what matches our query.

JASON: Okay.

SARAH: So, what you want to do is do a filter and basically you're gonna filter on ?? whenever the item label matches the query. So, that would be ?? so, we're not gonna do matches. I think we can do "starts with."

JASON: Okay.

SARAH: Which is going to be easier to do. And de?structure the query out of here, right?

SARAH: Yeah, exactly. So, you have access to the state of autocomplete anywhere, which is going to be extremely handy. So I think right now that should be good. Yes. Let's try it.

JASON: Let's give it a shot.

SARAH: If you type NE, you should only see Netlify.

JASON: Did I break it?

SARAH: Maybe we have a run time error somewhere.

JASON: I think I broke it. Let's see what I did.

SARAH: Okay. So, let's ??

JASON: I'm sure I did something silly. Okay. So, that part is okay. But what am I ?? I must be returning ??

SARAH: Item label should be starts with query. Let's maybe log it from the inside of filter. Is it starts with? It should be starts with. Ah, you know what? I know. I know exactly what it is. You can go back. We need to lowercase the label and the query just to make sure that ?? because right now it's case sensitive.

JASON: Yes, okay.

SARAH: So, we need to go to lowercase ?? maybe you can do it directly on the item.label. You can chain it.

JASON: Oh, yeah, I guess I could do that.

SARAH: So, that will be tolowercase and same on the query just in case. Let's not forget to return because right now this is not returning. Yes, this should work.

JASON: There is Netlify. There is Algolia. Beautiful.

SARAH: We just built search, so who needs ?? there are many things you cannot do on the front end. Well, you could do it, but probably in a much less efficient way, but things like fuzzy search, you know, type with tolerance, like, highlighting, et cetera, and all the infrastructure that comes with it.

JASON: Well, yeah, like, you can imagine if you were trying to do, say, like, a site search, right? Where instead of being Netlify, this would be like build with Netlify or ?? and this might be, like, getting started with Algolia. So, now I search for Algolia, and our little search won't work.

SARAH: Yes.

JASON: And then you can imagine that it would also have, like, a description. And maybe it would have, like, a bunch of other fields. And now to do this, we can't just do, like, a little search like this. Now we got to dig into these objects. As you said, there is stuff that is really hard to do. Like what if I slightly typo Algolia? I still want it to show up. If I type, like, the started or, like, tutorial, you know? Those sorts of things, I still want to find that content, but it's probably not gonna be exactly this. But maybe there's a tag for tutorial that I do want to search. So, and this is where Algolia's doing a whole lot of work that we are not ?? we are not doing, and really, like, this is ?? when we joked earlier that you'll start and be like I'm a genius, this is so easy, and it's really not really fast, that's what we're talking about.

SARAH: Yeah. Definitely. And, like, there are many things ?? we're gonna see it because we're gonna go on the Algolia dashboard and see your index. There are things we don't think about. Right now we just have Netlify and Algolia, but let's say I'm looking at your website and I search for Cassidy. So, you probably did a lot of streams with Cassidy, but maybe I'm ?? I want the most relevant first.

JASON: You want to see my shame?

SARAH: Go ahead. Please.

JASON: This is how I search on my site right now.

SARAH: That's the best way of searching.

JASON: Command?F. It's horrible.

SARAH: That's fine. This is fine. Really, I do that every day. (Laughter) But, yeah, see, you have many streams with Cassidy, but, yeah, maybe in the list, the first one is not gonna be the most relevant. It's gonna be just the first one in the list. So, if I type "Cassidy," maybe I want the most popular show that you did with Cassidy. If I type Cassidy React or Cassidy Jamstack, I want the most recent one.

JASON: This will completely fail if I search "Cassidy React," I'm done. I can't control?F anymore. If I search React, I have 38 results. So, it's significantly harder for me to go in and find things.

SARAH: So, there are many things like that that Algolia really takes care of. It's all the relevance part in terms of the search. The relevance is extremely important. Otherwise your search doesn't work. You have a working prototype, but it's not something that people want to use. Earlier, you know, when you mentioned Google, and you probably don't even use Google directly, you probably create a new tab and time in your omni search and it works. And the reason you do it even without thinking is because it works. It works well and you're used to it working, in that you can type something, enter, and, yes, it's probably going to be that. Either you searched it earlier and go directly to the results, or it's gonna lead you to ?? but you have good expectations about it. And I guess in terms of UX, when you achieve the point where people use your tool without even realizing that they're using it, you won. And that's not something that you can achieve, especially with search, by spending even a month or two or even six, I would say, trying to whip up your own search. So, yeah, let's go to that Algolia index, and we're gonna build you autocomplete for that website.

JASON: So, I used this really cool feature that y'all have. Honestly, it was so easy, I wish we would have done it on stream. I thought it was gonna take more time. But I used this Crawler, and the Crawler hooked up to my Netlify site. So, if I go to my app.Netlify.com and then in here somewhere is gonna be the Learn With Jason site. Here. And then I added ?? I added this Algolia Crawler, and then in my last build, when we get down to the bottom... Algolia just runs this plug?in. So, I didn't have to do anything other than just click some buttons on that Crawler site, and it sent my site to Algolia. Which resulted in this index. Now, I haven't looked at this, but I did send it to Sarah to make sure it was right, and she said it was good ?? (Laughter)

SARAH: It is.

JASON: We're going to be able to work with this today. It built this index with 997 records in it and a bunch of stuff like this. So, look how freaking cool this is we've got object IDs, we've got title and description, we've got some content, we've got what language it's in. This is really powerful stuff.

SARAH: Yeah. It's really awesome. And the Crawler is one of my favorite tools, especially because, like, Algolia's a hosted search API, so you have to send your data to it. And, you know, it's ?? we try to make it the easiest possible, but sometimes it's still, like, it's still work. You still have to do it. You still have to send your data and make sure it stays up to date. And sometimes you just don't want to do it. Especially because, again, search is one small concern in your entire website. You have to think of fonts and CSS and, like, your lighthouse Score and how to make it go to 100. All that stuff. The content. Search is one small part. You don't want to think about it, you want to log something that is going to work. And the beautiful thing about the Crawler is that it's extremely robust. It's, like, basically turn?key, but you have a lot of flexibility in it. Like you can exactly tune what is going to pick up on your page. So, when you have access to the Crawler, basically, you have access to ?? it's actually VS Code in the browser and you're gonna be able to say, okay, I have access to my page. So I think you have an instance of cheerio, which is kind of JQuery?style library that allows you to parse your page. You're going to be able to compose exactly the record. But by default, if you don't even touch it, it's going to do a great job at looking for all the meta descriptions, which any decent search engine like Google or whatever would look into to create their suggestions. And it's going to build the best thing that they can do with that meta information. Then you can customize it. That's probably the simplest, most straightforward, fastest way to get Algolia running. If you already have a website, then you can basically have Search and might I say Enterprise Great Search on your site, in probably an hour of work.

JASON: Yeah, I mean, I will say, like, what it took me to set this up was, like, three or four clicks. I hit this button and authorized my Netlify site, authorized my Algolia site, chose the one I wanted to index and it just worked. I just had to run a new build and that was it.

SARAH: That's the beauty also of integrating with Netlify. If you build your own pipeline you have to be the one knowing whenever you have to refresh the contents because, okay, it's not going to do it for you. But the beauty with Netlify is that you know exactly when there is new content because you have a new build, so why not hook into that? It's like getting the best pieces of all those services, integrating them together, and, like, that's the beauty of Jamstack is that we have so many awesome services that are ?? that do a really great job at what they do, and if we have, like, permissive enough APIs so that they can integrate, anybody can have the best website they want and can really have, like, focus on creativity and making great stuff without having to think about, oh, I gotta run a server myself and do I have to do ?? whatever. Who wants to think about that when you can, you know, create cool websites and, and think about the content? Like you ship a lot faster, I think, when you have those kinds of tools. You have no excuses. You basically can just think about your content and move on.

JASON: Absolutely. Yeah. I couldn't have said it better myself. I love all those things about, like, this approach, this architecture, about these tools, about the ease of integration. But, okay, you said it all. I'm not gonna repeat it. Now I want to see it in action.

SARAH: Yeah.

JASON: So, I've got this index here.

SARAH: Yeah, definitely.

JASON: Yeah, let's make it work. Let's get some search going here.

SARAH: Cool. So, let's go back ??

JASON: I'm gonna do the part I know how to do and I'm gonna say "search for episodes," okay? That's all I know. (Laughter)

SARAH: That works. You've done half of the work. Ers basically, we're going to copy/paste. So, that's probably half true.

JASON: Let's see. Getting started.

SARAH: Back to getting started so we can see the code. And we're going to break it down. So, the first thing you can see here in line 1 is Algolia search. So, Algolia search is the JavaScript API client. In that case, it's JavaScript that we're gonna use, and it's going to be the one that interfaces with the REST API. Algolia is a REST API and on top we have clients. We need to install Algolia Search.

JASON: I need to install this as well?

SARAH: Yes, you need to install. So, npm, install, Algoliasearch. All right. So, while it installs, we can go back to the code. So, that's the first aspect. Then you can see in line 6 to line 9 that we are instantiating the search client. So, this search client takes your application ID and your search API key. That's something that you can find in your Algolia dashboard. If you go in API key, you need to browse a little bit. I think you're in the right place. In the sidebar, you see you have more items, so you need to scroll a little bit. All right. So, here you have your application ID. So, that's the first one.

JASON: Okay.

SARAH: You can copy it directly, paste it ??

JASON: And that goes in here?

SARAH: Yes, exactly. And the second one is your search only API key. That's this one. So, you can copy it. It's okay. It's public information. The one that you don't want to share is the admin API key. As soon as you share it, the world explodes. (Laughter) So that's definitely not something you want to share. You can see it's encrypted with a lot of front end encryption. It's okay. Nobody can see it. Right now you have a working client, so let's go back to the getting started.

JASON: Okay.

SARAH: So, the next step. He so you can see that ?? we have the search client. Then you can see in our get sources, we are going to do a bit more stuff than what we have right now. So maybe we can get rid of this static source.

JASON: I'm going to comment it out so that we have it in the sourcecode.

SARAH: Yes.

JASON: And we will do up here ?? let's see, we'll do a new one, source ID. Our's is going to be episodes.

SARAH: Yes.

JASON: And then I want to get items. And I'm going to return ??

SARAH: And so here ?? here, what you're going to use is get Algolia results. So, this is exported from autocomplete. So, it's get Algolia results. It should auto import it.

JASON: Sure did.

SARAH: Yes. As you can see in the example, it takes an object, you pass the search client, all right? And then you are going to pass the queries. So, let's look at the shape. Let's maybe scroll to documentation. So you're going for be able to pass several queries. We only need one in our case. First, you're going to pass the index name, the index that you want to target. So, the fact that it's an array gives you a good idea that if you wanted to target several, you actually could. You could query several at a time. Let's go back in your dashboard, and so here you can see that ?? so, you have this little copy button.

JASON: Here?

SARAH: Yes.

JASON: Copy indices.

SARAH: So, you're going to be able to paste it.

JASON: Tada! Then let's look at the rest of the signature.

SARAH: Then let's look at the rest of the signature. So then you have to pass the query. The query is return from ?? you already have it from get sources in your code. You could also have it from get items. It's really whichever you want.

JASON: There we go. Query. So, I have my query?

SARAH: Yes. Then we could pass parameters, but that's really up to us if we want to. We could, for example, say that we don't want more than five hits per page. So, yeah, maybe let's say we want hits per page, 5, and then we can change that. So, those are Algolia search parameter. You actually have that in the Algolia documentation. You can see all ?? we probably have over 60 search parameters. You can do ?? not search parameters. We have both indexing and search parameters, but you still have a lot of params that you can pass to your search. For example, you can say, hey, I want to filter on the most popular episode. So, let's say you have an attribute that says "popular" and you computed that with some other information, you would say, I only want the stuff that is popular. I only want the things that feature this person. I only want the episodes that are longer than this length, et cetera. So, you could start imagining the kind of UI that you could build where you could have some options at the top saying, hey, only long episodes, only short episodes, et cetera. And then the filters ?? the filtering capabilities of Algolia would allow you to take care of that.

JASON: Okay.

SARAH: So I think we're good in that code. So, right now, get Algolia results, it's set up. And it's going to work.

JASON: So, are we done? Did we do it?

SARAH: No, we need to pass the template first.

JASON: Oh, the template ??

SARAH: Because, right now, there is no way ?? there is no way for us to return it.

JASON: Okay. So, this is our get items. So, now I need a template.

SARAH: Yes. So, templates. And you would have item.

JASON: Item.

SARAH: So, templates is an object. It's not a function.

JASON: Oh, right. Got it. Templates. And then item is ??

SARAH: Is a function.

JASON: The function. All right.

SARAH: And for now, we're not going to stress too much. We're just going to return JSON stringify on item just so that we can see our full item and then decide what we want to put there.

JASON: Okay. Look at that. We're searching for Cassidy, and I can see, troll your boss with the Jamstack showed up real early. There's the content.

SARAH: All right. That's pretty cool.

JASON: That's really cool.

SARAH: So, maybe let's make it look a bit better.

JASON: It has the whole transcript. Oh, my goodness, this is gonna be amazing.

SARAH: You can actually snippet that so you don't have to show the entire thing and snippet maybe 50 characters around it, but that's something that we're going to be able to do. So, maybe now we want to render that a little bit more, like, a little bit prettier, right? Because that's ??

JASON: Yeah.

SARAH: You know, it's nice, but it could look better.

JASON: Sure.

SARAH: So, if you go in the docs, we're going to go in the docs for the classic theme.

JASON: Docs ?? let me make this bigger, yeah.

SARAH: If you go in the sidebar, that would be at the bottom. The very bottom of the sidebar. You have autocomplete theme classic.

JASON: Okay.

SARAH: And then in the scroll ?? if you start scrolling, you should see ?? maybe it's not big enough, the window, if you make it a bit bigger, you will see the scroll spy on the right. Yeah, exactly. So, you see templates? Right on top. And here, you have the recommended mark?up for an item. So, you could actually ??

JASON: Oh, interesting.

SARAH: You could actually copy that. And so that is going to be following the CSS class name conventions that we have. You can totally derive from it if you want, but that's going to work with the theme. So, we're going to copy that, and we're going to adapt it to what you have in your record.

JASON: Got it. Okay.

SARAH: All right.

JASON: So, I have item in components.

SARAH: So, the components, it's gonna be interesting. We're gonna see what it does after, but maybe the first thing that we want to do because right now it's not gonna work because it's not the following the schema that you have in your records. So, the first thing, if you look at the templates, you have an image. So, it does item image, et cetera. So, let's ??

JASON: That one will match.

SARAH: Yes. Maybe we can look at your Algolia index directly so we can have ??

JASON: A little easier to ??

SARAH: Yep.

JASON: Okay.

SARAH: So, the image. Maybe show more attributes. If you click on it.

JASON: Here's our image. So, image is image. So, we can keep that one straight up.

SARAH: Exactly.

JASON: Name is gonna be title.

SARAH: Exactly.

JASON: What else do we have in here?

SARAH: So, we have item, content title. So, here you can see in line 43, you have components.snippet. So, what it does, snippeting and highlighting, basically, it's going to make sure that the part that you typed is highlighted, right? So, snippeting and highlighting do that both.

JASON: Oh, I get it. Okay.

SARAH: And snippeting will also make sure that if you have long content, that it's snippeted to something that is workable. So you can say, okay, I want to only show maybe 50 characters and that's it. So, that's what the components will help you do. That's kind of a convenient ?? convenience that we provide right in your template so you can already have syntax highlighting. And I think we can probably remove the actions, the item actions, because this is not necessarily something that we need in that case. Maybe we can keep it.

JASON: Well, yeah, it doesn't look like it does anything just yet.

SARAH: Yeah, it's just NSGV, so that should be nice enough.

JASON: Wow!

SARAH: And boom.

JASON: Holy ??

SARAH: That really works well.

JASON: That is amazing. And, look, here is when we talk about Cassidy in the ?? oh, this is so cool. In the transcript. So, okay. Then we can look at something that, like, we've never done a thing on. So, if I say mechanical keyboard... dang it, that is cool! Oh, wow. Okay.

SARAH: That's really awesome.

JASON: I mean, and, like no way at that time, like, so transcripts in and of themselves are incredible. They make the episode more accessible and people can follow along who don't, like, listen, you know? You can watch and keep it muted, right? You can still follow along. But, oh, my goodness, this is so powerful for ?? oh, didn't they talk about this on an episode? I don't know. Let's talk about tacos. Any time we talked about tacos, it's going to come up because it's in the dang transcript. Holy crap, this is gonna be amazing.

SARAH: This is really cool. You can see ?? let's maybe improve it now. Because it works well. If it works that well in such a little amount of time, we can probably improve it. So, if you reopen your console, you will see that autocomplete is giving you some feedback. It tells you that the attribute title that you described does not exist on the hit that you set it in attribute to snippet. And that's, indeed, the thing. Is that your title right now is not set to be ?? so that you can snippet it. So, the first thing that we want to do, I think for title it's okay because your titles are never gonna be longer than a certain, like, amount of characters. So, instead of using snippet, we can probably use highlight. So, if you go back in your code, and that should work right away. So, yeah, on this one only, you could ?? yeah, go with highlights. Let's try it again now. Boom. And if you type Jason. Or pizza. Maybe type Jason so we have a match in the title.

JASON: Oh, yeah, here it is. Now it's bold.

SARAH: Awesome. That's great. We could actually tweak the relevance a little bit if you go back in your Algolia dashboard. There are many things you can do to improve the relevance. We're not going to spend too much time on it. For example, if you go in configuration... so, it's in the tabs, in your existing page. Yeah, exactly. So, you have ranking and sorting. Under relevance, right now you're on searchable attributes. And then you have ranking and sorting. It's in the sidebar. Yes. And so right now you can see that ?? so, we have the Algolia ranking formula that we're not gonna touch. And then what happened is that the Crawler set some custom ranking for you. You can keep that or you can change that. So, for example, you up can see the first thing that it computed, the URL depth. So, the shallow ?? the more shallow your URL is, the better. The higher it will come. And that's one choice that was made.

JASON: Gotcha.

SARAH: But that's something you can change. Then you have position. So, I guess it was computed from the position in the tree that they create from your website whenever they crawl it. And deciding, yeah, okay, if this is something that is deep or maybe ?? I don't know ?? it's probably ?? it's probably a computation of something entirely or many different pieces of information.

JASON: Yeah, who knows. I have everything in one giant list. It may be stuff down here shouldn't be ranked as highly, which actually isn't true.

SARAH: Yes, then it truly depends. That's something you can decide on yourself. You can create, actually, new attributes when you're in your Crawler. From the information that is parsed, you can create new attributes. Numerical attributes, bullion attributes, and then you can decide, hey, I'm going to add this in my custom ranking, and so the way it works is that it's basically a tie?breaking algorithm. So, every criterion is going to be compared. And whenever there is a tie, it goes to the next, to the next, et cetera, until there is nothing and then it defaults to the object ID. But, for example, in your case, you could decide that the publish date is actually the most important. That the more recent an episode is, the more relevant it is. And so then you could say, hey, I'm going to move it right here. And this way the ?? whenever you have a tie, like, if you type "Cassidy," for example, you will match on many different things, and then in that case the most recent episode is going to be the one that shows up first.

JASON: Got it. And it looks like ?? looks like I've done a bad job of including publish dates, so I think it won't work in our particular instance, but that's okay because we're still getting great results here. This is, I mean, that's just so dang cool. So then that also means that if I ?? if I want to go into my crawler, you're saying that during the build, I can set a custom thing like ?? like I could theoretically do something where I say I want to be able to sort episodes by the number of boop emotes that were used in the chat, and then I could take that and run it through my build system and add a ranking that was like boop count, and it would ?? it would give me, you know, the number of boops used in the episode and we could use that for sorting in Algolia?

SARAH: If you have that on your page, if that's something we can find on the website in the code or anywhere, like, we have to have the information.

JASON: Right.

SARAH: If that's something that we can find anywhere, even if it's in the metadescriptions, if it's not visible or it's visible, that is something you can use to create a new attribute and then you can do whatever you want on it in Algolia.

JASON: Oh, that's so cool. So I could create a custom meta tag and index on literally whatever I want. Oh, the chaos that we will cause, chat. This is gonna be great. (Laughter) No, I love it. Like, I love how ?? I mean, what, we've been at this for less than an hour, and we have pulled in in data from a website. I did three clicks. I literally wrote no code to get this data. So, I installed the Crawler, I built my Netlify site, I have then followed your instructions on getting started with the Crawler here, and ?? or with autocomplete, and now we've written ??

You hangers. You dirty hackers.

JASON: This much code. Including our templates. Including our commented out custom code, we have written under 100 lines of code, and we have a fully?functioning, good looking autocomplete. That is really incredible. And also, does it still, like, if I spell it wrong, does it still work? It does.

SARAH: Of course it does.

JASON: So, if I typo, it'll also work. Like change my make to Jackson. Still works. Or if I do the really common "Netilfy," ?? screw that one up all the time. We still get our content. How long would it take me to build this? Infinite time because I'm not even going to bother. That is, I think, really, really incredible in terms of, like, how much functionality you get.

SARAH: But in the chat is saying what about Netflix? That's exactly what I wanted to ask you. So, if you type Netflix, that's the thing. Maybe you will have too many typos.

JASON: It doesn't. It's smart enough. Look.

SARAH: So, yeah, we stop after two typos. That's actually something you can control in the Algolia dashboard if you want. You can say, yeah, I want to accept more typos because Netflix is too many typos. Maybe that's not what you wanted. If you want to say ?? or you could even have a synonym. If you decide, okay, whenever someone types "Netflix" in my search, I want them to see Netlify. I don't want to see any Netflix nonsense. Then you could say, you know what? Netflix actually means Netlify, and that's what you will show.

JASON: Okay. So, if I go to my configuration and I want ??

SARAH: Yes ??

JASON: ?? to add a synonym.

SARAH: Boom.

JASON: I'm going to add a synonym. Okay. So, list of synonyms. One ?? is it one?way synonyms?

SARAH: That would be one?way sin synonym.

JASON: Okay. Let's do a one?way synonym. If the search term is "doofus," we want it to find Jason. If I search "doofus." Oh, trolling inbound, everyone. So much trolling.

SARAH: Don't give anybody your credentials.

JASON: Also, I love this. Look. Curly boys. Look at what Cassidy Evans did by teaching us this. She started calling all brackets, like, curly boys, square boys, like round boys, and it launched ??

SARAH: Parenthesis boys.

JASON: Just launched a revolution where now we have ?? I think there is even, like, a sweatshirt that you can buy that's got the curly boys on it.

SARAH: Please send me the link.

JASON: Oh, can we find that? Let's see. Curly boys shirt. Here. Yeah, so if you ?? if you want a curly boi shirt, brad made these. You can definitely go check these out. I have a sweater version of it with the night owl theme and I love it.

SARAH: Oh, it's using VS Code themes. Of course I'm going to use Sarah's theme.

JASON: Absolutely, yeah. Okay. So, I am so extremely happy about this that, I mean, this ?? oh, the trolling we will do. It's gonna be so much fun. (Laughter) But, yeah, so, like, jeez. So, honestly, this all happened so fast that now I'm kind of like, wow, what do we do next?

SARAH: Oh, what do we do next? Well, I can give you an idea. Right now, you have search results that appear, but they don't really lead you anywhere. If you click on it, right now, it doesn't really do much, right?

JASON: Oh, that's a good point. Good point.

SARAH: That's kind of the point. You want to navigate to it. So, first, what we're going to do is create a link on our elements. If you go back to the docs in the autocomplete classic theme, it's actually going to tell you what is the proper way to put the link. So, basically you're going to replace the wrapper that you have right now with an item link. Right.

JASON: So, I just put one around the whole thing?

SARAH: Yeah, exactly. And I think you can probably replace the wrapper that you have right now with that.

JASON: Okay.

SARAH: Yes, that's what it says right on top in the docs.

JASON: So, here's the wrapper. Replace ??

SARAH: Oh, yes.

JASON: In place of the item wrapper. Don't use them bother together.

SARAH: I bolded that because it really looks weird.

JASON: And then I'm gonna drop that link in. And I believe ??

SARAH: Is this URL?

JASON: I believe .URL is what works, but let's double check. So, let's go to my indices, and in here we've got the URL, and that's relative. So, maybe ??

SARAH: Okay.

JASON: ?? I should ?? let's do it like this. And now it's a variable. Okay. So, this should link everything in. So, let's give that a shot.

SARAH: Now when you click on something, this should work. It leads you to the right place.

JASON: Look at it go. That's amazing.

SARAH: But let's not ?? let's not stop here in such a, like we are on the right track. Now, we want it to work when we use the keyboard. Because, of course, when you use an autocomplete, you want it to be navigatable with your keyboard, but also to be opening properly when you use enter and use, I don't know, click enter or things like that. There is actually a guide you can check on the documentation. It's on the side. You will see integrating keyboard navigation.

JASON: Integrating keyboard navigation. Here we are.

SARAH: We have an API called Navigator API, and basically it's going to take care of all the patterns you would expect. So whenever you hit enter, it's going to open it in the current tab. When you use click enter ?? I don't remember, maybe option is going to open it in the new window or a new tab. And so that's something that you can actually do pretty easily. So, the one that you will want to do ?? so, this is the default implementation. So you don't actually need to copy it. What you will need to do, if you go back ?? if you go back a little bit higher in the docs, yes, see? You have get item URL from the ?? from the usage. Get item URL. If you scroll a bit, you can see that in your source, you will have get item URL.

JASON: Oh, okay, I got it.

SARAH: That's a function. Just doing that will work right away. We're going to look a bit deeper into the implementation.

JASON: Okay. What I'm going to do then, I'm going to change just to have the ??

SARAH: Ah, yes, true.

JASON: ?? change to have the full URL. So, there's our full URL. Now if I do this all with my browser. So, let's type ?? oops. And then I can go down. So, I'm using my arrow keys here. I'm gonna hit enter. And there we are.

SARAH: Boom. And every pattern that you would expect, like if you hit command at the same time, I think it's command, or shift, that would open in a new tab, et cetera. So, everything is, like, according to ??

JASON: The shift is a new window?

SARAH: Yes.

JASON: Command is a new tab. I honestly didn't know that that worked. That's amazing.

SARAH: So, all those kinds of patterns that we were mentioning at the beginning, you don't want to think about that. You don't want to look at the specs. You don't want to think, oh, what's the right way to build a combo box, right? People actually spend time working on that, but do you want to read it? Really you probably don't. You just want to build cool stuff and not reinvent the wheel. It's not that you don't care about it, it's just that it's too much effort, and there's only so much that we can do. We cannot rebuild autocomplete and then build a search on your website. That's too much. So, this works pretty cool. But if you look back into the docs, what's really interesting is that it works with basically whatever implementation that you want. Because right now the default implementation uses window.location. And so we navigate with JavaScript. But maybe if you're using a Gatsby website, you have, you know, like, navigation that will not require that you refresh the page. So ??

JASON: So you could use React router or the Gatsby navigate. Oh, that's super cool.

SARAH: If you scroll on the page, you can actually see a Gatsby everything. Maybe you can check. So, let's say you have a Gatsby website. It's just right here. You can import navigate from Gatsby. In your navigator ?? navigate function, you can just say, hey, whenever you get the item URL, you're going to navigate to this item URL. So it's pretty cool. When you do it with JS, it's the same thing. You can do exactly the same thing. So, basically, that's the whole thing about control that we were talking about earlier. By default, you will have same defaults that work great and you don't even have to link into it. But if you want something that gets better and better and refine it and make sure that it fits exactly your use case, your website, there will always be a way for you to go further, deeper, and uncover APIs as you need.

JASON: I love it. I mean, this is ?? and this is just, like, such a thoughtful design, too. Exposing these lower?level things. I don't want to have to think about it, but of course if I'm using Gatsby, I want to be able to use that nice feature of not reloading page to navigate. Putting these escape hatches in there, that kind of progressive disclosure of APIs is such a nice flow that, you know, as you said, give me the controls as a developer to do whatever I want, but give me good default so that I get a great experience without having to do everything by hand. Because I'm never gonna build my own keyboard accessible fully functional autocomplete, I'm just not gonna do it, but I will happily tweak this to look and function the way that I want it to. I'm absolutely gonna go put this on my website, like, right after this. How great was this? How approachable was this? And I'll spend some time, you know, with the styling and making sure these images look like images and all the things that I'm gonna need to do, but dang it if this isn't just exciting. Like it gets me excited to build the thing. Before I was thinking about search and like, oh, I don't want to have to write ?? I don't want to have to send the indices to Algolia. I don't want to have to manage where this data comes from. It was a lot of stuff I didn't want to do manually. This took all of that out and just leads me building a UI, which is the stuff that I like to do.

SARAH: Yeah, exactly. We're not the cops. If people want to build ?? (Laughter) Their own autocomplete, they can do really whatever they want. And, like, please, if you want to build an autocomplete yourself, like, knock yourself out. I'm never gonna tell people don't build that because that's fun, and you learn stuff. Now, what we're talking about here is what you want to build is a search on your website. And if you want it to be great, it's probably a better idea to use something that already works. But, yeah, you're gonna learn a ton of things building your autocomplete. You can even look at the design of this one and other ones. There are other autocompletes online on GitHub. So that's something that you can check out. But what's really cool is that when you build that, yes, you are not building the autocomplete, like the thing ?? the underlying thing, but you still feel like you're building something. Like you built it at the end of the day. You may ?? and we're gonna see that right after. You can customize it. Like this is really the bare minimum that you can do. Like if you go quickly on the Algolia docs and you open the search ?? so, the search box here.

JASON: Ooh, look at that. Nice overlay.

SARAH: Yeah, you can type anything. Maybe ??

JASON: Whoa!

SARAH: This uses autocomplete. Like for real.

JASON: That's amazing.

SARAH: An alpha version. It's not even the latest stable version. This gives you an idea of the kinds of things you can build. So, really, it's important not to ?? not to feel like, oh, yeah, but if I use libraries then my creativity is gone and I'm just copy/pasting, I'm not a real developer. Yes, you are. Because you have those tools, because you have Vue, React, whatever, you are freed from the stuff that you should not care about. You should care about making the most kickass autocomplete search experience with a preview panel, with some kind of, I don't know, custom, yeah, query suggestions and make them look awesome. Create some animation. All right. Maybe let's type PHP and then tab instead of ?? yeah, boom. Bam. You have tabs.

JASON: What?

SARAH: See. So, those are custom things and they're gonna become, like, official APIs in autocomplete soon. The tags API is something I'm working on for this quarter's OKRs. This stuff, you can build that and it's something that you can build because you're freed from all the concerns of having to whip up your own search solution, having to take care of the infrastructure of a search solution, building, like, JavaScript Autocomplete solution that works, that scales that, like, really is able to take that life stuff and update properly without overwhelming your DOM. It really opens up the possibilities in terms of creativity. What we just built together in less than an hour is really just the beginning of what you can create. Imagine the possibilities.

JASON: Mm?hmm. This is ?? yeah, really, really just ?? my mind is kind of exploding with what we could do with this, right? Bennie asked in the chat, is Algolia grabbing the video thumbnail? So, in my case, yes, it is grabbing the video thumbnail, but to be clear, I generate this video thumbnail. It's not ?? like it's not going to YouTube and getting a thumbnail and bringing it back. This is something my site generates for use with the videos. So, these thumbnails are generated from my site. Not pulled from YouTube or anything.

SARAH: But it would actually be really cool. I'm sure you have the information on your site. If you index the YouTube code, you could have ?? let's say you build that preview panel like we have on the Algolia docs, you could put that image, right, in the preview panel. When people click, you could replace it with the video from YouTube, and people could start looking at the video from the autocomplete just to see, "A", maybe if that interests them. If they're interested in it. So, that could be really cool. And that's really no magic, is just, yeah, you have JavaScript. You can do whatever you want. And that's the beauty of it. You can display anything you want. The only thing that stops you is the limits of your creativity. But as soon as you're freed from having to take care of the infrastructure, then you can just look at the kickass autocomplete experiences that you have out there. You have many of them. You have plenty on the Algolia.com domain, but you can look at Amazon. You can look at Netflix. Netflix has awesome search capabilities. You can look at Red Bubble. I really love their autocomplete search. Have fun. Gather search patterns. Go on the Algolia solutions section. You will find a bunch of inspiration and maybe even UI kits that you can use. That's what you want to focus on. That's where the fun is.

JASON: Yeah. Okay. So, you just said something that I am just gonna repeat because it's so important. You just said the only limit is your creativity, right? You're not being put in this place where I have an idea, and in order to complete my idea, I don't just have to have the idea, I have to build this whole foundational set of skills and figure out how to do fuzzy searching. I have to figure out how to do indexing. I have to figure out how to do all of these things that are really hard. They're very, you know, it gets into computer science topics to start figuring out how are we doing typo detection? How are we adding tolerance for that sort of thing? How do you do a fuzzy search in an efficient way? How do you get 1,000 entries into an index and memory and search them in a way that doesn't get really laggy? Those are all hard problems to solve. By adding these tools, by putting this stuff into a package that makes it easy for us, by getting the raw materials. We get to skip all that. We don't have to learn this foundational kind of underpinning computer science stuff. We can instead focus on, hey, I am a developer and I have an idea. I want to build my idea. And it's stuff like that, what Algolia's doing with search, what the Jamstack in general is doing with allowing front?end developers to build full?fledged apps by, you know, you've got the serverless approach and the decoupled front end. We don't have to figure how to set up proxies and API gateways. I want to ship that thing and Netlify put it is on the internet for you. Now we're only limited by what we can imagine instead of, like, whether or not we've learned all these baseline skills of things that really aren't our area of expertise. We're expert front end developers. Let's be expert front end developers and use these tools that let us unlock all of that possibility.

SARAH: Yeah. There. You said it. There is nothing to add to that. I think we still have a little bit of time, so I would maybe love to go ??

My buckets!

SARAH: Setting up a plug?in. We were talking about creativity and using really interesting search patterns. And so while, you know, researching, one of the search patterns that really became obvious is sometimes when you search for something, and you enter it, then later when you search for it again, you want to see that recent search appear quite early because you're like, yeah, stack overflow and, like, yeah, how to ?? I'm not going to do the center div in CSS because it's so old. I don't know, maybe how grids work. That's definitely something that I'm getting that, you know, CSS tricks article. You want to see, like, you want to see maybe the search result that you visited the last time that you did a search. So, there's actually a plug?in because autocomplete has a whole plug?in system and ecosystem. You can load a plug?in, but you can also build your own plug?in. So, maybe the first thing we're going to do ?? you can go back into the docs directly. Okay. We have it here the first one is plug?in recent searches.

JASON: No way that I ?? also, did you see that I typo'd that and it still fixed it? I noticed that I spelled plug?in wrong.

SARAH: I don't even see typos anymore. They don't even exist for me because Algolia's fixing them for me. All right.

JASON: Okay. So, this is incredible. All right. So, we have a plug?in now.

SARAH: Yes. And this plug?in is going to allow you to save your recent searches in whatever you want. So, we have two plug?ins. The first one is create recent searches plug?in, which you can plug to whatever storage you want, and we have one that already works with the local storage.

JASON: Which because we have, like, ten minutes left, I'm gonna use this one.

SARAH: Yeah, definitely. So, let's do it. We're going to instill this one and then we are going to import it into the project. And you know what? We probably will need to do another episode because it would be really cool if we built a custom plug?in.

JASON: Yeah, absolutely, it would be cool to do that.

SARAH: Right?

JASON: Okay. So, I'm going to copy this.

SARAH: Yes.

JASON: And then I'm going to put it up at the top. And now what?

SARAH: Let's look at the docs. So, basically ?? so, it's imported. And then you're going to instantiate it.

JASON: Okay. And is the key related to something? Is that just an arbitrary thing or do I have to map it?

SARAH: Let's check in the reference. I actually don't remember. If you go at the bottom of the page, you should see the API reference for it.

JASON: Local storage key.

SARAH: Yeah, okay. So, that's the prefix that we're going to nest it into. Because, you know, local storage can ?? you can override quickly something.

JASON: Yeah. So, let's do something that is going to be more or less unique. We can do that.

SARAH: Yes.

JASON: Do you need underscores in local storage? I don't remember.

SARAH: Anything that is serializable is basically good. I think the only thing you have to do is pass it as a plug?in. You have a ?? in property in your autocomplete. Which is an array. Which takes exactly ?? that's exactly what you want.

JASON: Oh, my goodness. So, now if I go in here and I search for ?? let's search for "burgers."

SARAH: Okay. Did you select one?

JASON: I select run. And I'm going to go back, and let's look in our application. And we've got local storage.

SARAH: Do we have anything?

JASON: Did it not save for me? Maybe we had ?? maybe I needed to refresh. Let's try it again.

SARAH: Okay.

JASON: Come back.

SARAH: Ah, maybe because we navigated. Maybe something happened in that we ?? oh, yeah. I think the reason why you have that is because we navigated before there was a chance to save it somewhere. But I'm not sure. That's interesting. Okay. We did everything else we were supposed to do. Hmm. Okay. Just to make sure of it, maybe we're gonna ?? what we're gonna do is remove the get item URL so you will be able to just hit "enter" and it's not going to navigate. Just to see if it works. It should actually work without, but, yeah, I don't know.

JASON: Okay. So here's our burger.

SARAH: So, you will have to use your keyboard in that case, because right now you're clicking, so it's the learning is actually ??

JASON: Oh, I got it. Got it. Got it. Hit enter.

SARAH: Okay. Do we have something in local storage? Meh. All right. Maybe there's something ?? if we look at the console, is there an error in there? Okay. Let me look at the docs. What is going on?

JASON: Recent searches plug?in.

SARAH: Recent searches plug?in. That's the demo effect.

JASON: We reached ?? we flew too high, too close to the sun. Everything went too perfectly.

SARAH: Exactly. That's probably what happened.

JASON: Let's make sure I put this in the right place because I definitely just copy/pasted it in. Autocomplete container, open on focus, and plug?ins. And so maybe I ?? would be very odd if I had to put it at the end, but ??

SARAH: It's ?? well, it's an object, so it should be ??

JASON: That would be ridiculous, right?

SARAH: It's the right name. Recent searches.

JASON: Hmm.

SARAH: Hmm, that's odd.

JASON: That's okay. Everything else went so well.

SARAH: Yeah.

JASON: But okay ?? so I'm just going to roll this part back. So, we'll just roll this back so that the demo is all functioning the way that we want it to. But, yeah, I think this is ?? I am ?? I am very happy. And now we have even more reason to do a follow?up episode on plug?ins for autocomplete. Because we'll be able to dig in and see how those work under the hood. How we can build our own. So, yeah, y'all, how cool was this? Anybody have any questions before we wrap this thing up? Because while you're thinking of questions, I'm gonna ask Sarah, where should people go if they want to learn more? If they want to take next steps from here.

SARAH: For Autocomplete, what you want to do is really basically go on the Algolia documentation. So, yeah, you have the URL. We have a short URL which is basically ?? so it's alg.li. The short URL for Algolia. Alg.li, and then would be /autocomplete.

JASON: Ooh, I like that. That's fun.

SARAH: And you actually can see probably if you go in the showcase or sandboxes, probably in the showcase. Which is in the getting started on the side. So you see in the sidebar, you have showcases. And maybe ?? so, we have doc search. We probably want to go in sandboxes. See recent searches in action. With categories, maybe we have recent searches somewhere.

JASON: Oh, that's cool. Recent searches. And then here's what it would look like.

SARAH: Exactly. Let's open the sandbox. We have a little bit of time. It's going to open a code sandbox. And this one should work.

JASON: All right. So, I'm gonna search for ??

SARAH: Go bigger.

JASON: Google. And then we can see my ??

SARAH: Did you select it? Yes.

JASON: My searches there.

SARAH: Ah, I think I know why it didn't work. You would ?? it's not recent results, it's recent searches. So, you could actually go back to your code, and you would actually need to enter once you typed a query.

JASON: Oh.

SARAH: Slipped my mind.

JASON: Oh, okay. So, let's unroll that back.

SARAH: Let's un?unroll. You can probably keep the get item URL. That would be okay. And if you type something, and then you enter, boom ??

JASON: There it is.

SARAH: Boom. Exactly. Yeah.

JASON: And so now ??

SARAH: Yeah, I would have been really pissed at myself if that didn't work.

JASON: So, no, this is all good. Then I can keep this in here.

SARAH: Yeah, exactly.

JASON: Okay.

SARAH: I mistake with recent results, something in doc search. For example, if you go on the tailwind CSS website and you select something, you would actually see the latest searches that you made. So, which actually uses autocomplete under the hood. So you can imagine all the things you could do. This plug?in, you could actually go on GitHub and look at the code for the recent searches plug?in. It's actually pretty simple. There is a plug?in API. So, we can create our own thing. And right now we are out of time been so we won't be able to do it, but, like, the thing that I imagine that we could do and we could do it another time is that imagine that you could ?? you could shift dark mode and light mode from your your auto complete. You type a slash command. Boom, it switches to dark mode.

JASON: That would be really cool.

SARAH: Exactly.

JASON: So, you could ?? so, we could use plug?ins to turn this autocomplete into an omni box.

SARAH: Exactly

JASON: Where you can control different things on the site. I love that.

SARAH: I'm actually working on a pet project right now which is reproducing, you know, the omni bar that you have in FireFox? Maybe you can try it, I don't know if you type Netlify in a new tab. Not in Google. Really in the bar. You can see many things. See? You have search with Google and things you already looked into. It searches your history. If you install some search engines because you actually can install search engines in your browser, you can actually type "YouTube tab" and it will search directly into YouTube results. So that's something that right now, oh, my God, it's really awesome. You can do that with Wikipedia, with Google, Bing, Dot Dot Go, anything that has a search engine that follows the open search initially.

JASON: Oh, my God, you can search Grub Hub. That's amazing. That's really, really cool.

SARAH: I'm replicating that right now with autocomplete, just to show the kinds of things you can do with it and how far you can push it.

JASON: I love it.

SARAH: You can turn your search bar, autocomplete into an omni bar and really recreate the same kinds of experiences that people expect from Google. How fun is that? That's really awesome

JASON: I can think of so many ways we can use this. There is no way right now to figure out what the sound effects you can play on this show or look at the emotes or all sorts of things that would be super useful. Omni bar is a perfect way to approach that. But, unfortunately ??

SARAH: The VS Code control panel, for example, if you want to recreate that on your developer website and just, like, maybe open a page like you would open a file. Imagine how cool that would be ??

JASON: That would be amazing.

SARAH: That would be so fun.

JASON: Okay. So, unfortunately, we're out of time, so what I'm going to do is send everybody to your Twitter. We've sent the autocomplete docs. Are there any other places you want people to go if they want to get started?

SARAH: So, yeah, you probably want to go to Algolia.com. It's going to be the easiest, just let the website guide you. You can go to Algolia.com/doc, which is my baby website. That you want to visit. Where you can learn everything about Algolia. How to get started. How to create your index. If you want to go ?? if you want to check out the Crawler, there is probably a page that you already have open.

JASON: I do.

SARAH: You can search for Algolia Crawler or Algolia Netlify. Yes. If you want to start building a search with, like, a site search with the Algolia Crawler, you can go there. But, yeah, probably the easiest way would be either Algolia.com or Algolia.com/doc.

JASON: This Netlify plug?in is if you're using Netlify, I'm still blown away at how fast this was. So, this is really, really well?designed. It's a great integration flow. So, definitely go check that out. You just kind of follow these instructions and you're just done. It's really, really nice. With that, let's do a shout?out to the sponsors. We've had Jordan with us all day. Thank you so much, Jordan, for doing the live captioning. Jordan's from White Coat Captioning who is with us every week. And that's made possible through the support of our sponsors, Netlify, Fauna, Auth0 and Hasura. Once again, make sure while you're on the website, you go and check out the upcoming schedule. We've got so much good stuff coming up. We've got Brian Douglas coming back later this week. In two days. I can't wait. I love Brian. He's the best. We're going to learn about GitHub Actions with fork PRs, FlutterFlow, Rust, this list, and also I tweeted about having people come on the show last week and I booked, like, 25 episodes or something. So, the schedule is amazing. I'm so excited for all the people who are coming on. So, definitely go and check this out. With that, Sarah, thank you so, so, so much for hanging out with us today. This was an absolute blast. Chat, as always, thanks for hanging out with us. We are gonna go find somebody to raid. I don't know who's on, though. I guess we'll have to go figure that out, but thank you all so much for hanging out with us today. This was an absolute blast. Sarah, thank you so much, one more time. We will see you all next time.

SARAH: Yeah, thank you for having me. Bye, everybody.