Okay, let's take a look at using an alternative driver for Laravel Scout. We'll be making use of MeleeSearch, which is an open source alternative to Algolia. From what I've tried so far, it works really well and is a great choice if you prefer keeping your data on your own servers. It's also open source and free, which is another plus. So first we have to have MeleeSearch running on our dev machine, and also in production if you plan to go to production. So for our dev machine, you can go here, and there are different ways to install it. I am using brew. So just brew install MeleeSearch, and then you can run the server using MeleeSearch.

I am using brew. So just brew install MeleeSearch, and then you can run the server using the MeleeSearch command. And that will run the MeleeSearch server locally. And now let's go ahead and install the Laravel Scout driver. So you can find that here. And let's composer require it and swap out the Algolia driver. So let's open up another tab here. LC Scout example. Okay.

LC Scout example. Okay. Okay. And it says we have to install Guzzle, but we're using Laravel 8, so we can skip that step since Guzzle is already installed. And we just need the MeleeSearch config here, since we already have Scout installed. So let's run that. And now we just have to add these variables in our .env file. So let's do that. env.

So let's do that. .env. Let's paste it down here. And we don't need a master key or a MeleeSearch key. So it's setting the Scout driver to MeleeSearch, and it was Algolia by default. So now it's going to use this new server. And this is the default port and address for MeleeSearch. And we have that running right here. So now if we just import our User's data to our new index on MeleeSearch, then this should work.

So now if we just import our User's data to our new index on MeleeSearch, then this should work. So we can run that command again, php artisan scout import. And the model is app\Models\User. Okay, so now if you want to see those records in our index, we can go to 127.0.0.1, believe the port is 7700. Then there is our new index, and we can search it just like before. So again, works exactly the same. If we open up TinkerWell, and say, for example, search, we should see the same examples or the same records that we see here.

If we open up Tinker Well, and say, for example, search, we should see the same examples or the same records that we see here. So for this string with my misspelled name, we should only get one. And we do. And one more example here, say we want to update my name, let's just look for me, 202. And then we can do $userName equals $myFullName. And then we can do $user-save. Let's run that. Cool. And now this should be updated.

Cool. And now this should be updated. There we go. So MeleeSearch also has a JavaScript library if you want to do interactive search on the front end like we did for Algolia. So let's quickly do that. So you can find that here, MeleeSearch.js. Let's quickly make a really basic project for MeleeSearch on the front end. So let's go to our routes file. Let's make a new route here.

So let's go to our routes file. Let's make a new route here. Just duplicate this and let's make one for MeleeSearch, M-E-I-L-I, search, let's grab that. Let's return a new view called MeleeSearch. Make that new file, MeleeSearch.blade.php. Let's just do this. Okay. And let's go ahead and import that JavaScript. So I believe there is a CDN here, right here.

Okay. And we don't have an API key. So let's remove that. And we are console logging the response. So let's see if we get the index name in our response here. So do I have that project open? I don't. And it's /MeleeSearch. Okay. Open up DevTools.

Okay. Open up DevTools. And we do get an object here, response, and there is our index. So let's see how we can get the results for a query here. So we can grab the index. We can delete this for now. Okay. const index equals client.getIndex, named users. And now we can use index.search and give it a string to search. Say my name is spelled, and we can use a promise, or you can use async await as well.

And now we can use index.search and give it a string to search. Say my name is spelled, and we can use a Promise, or you can use async await as well. I'll stick to Promise. Response. And this is console.log response. Let's see what we get here. Refresh. And there are the results for our query. And there is a key called hits. So we can just use response.hits.

And there is a key called hits. So we can just use response.hits. So like I said, let's make a very basic version of what we did in Algolia. So again, nothing special. I'm not even going to do styling here. We'll just make it work. So you can get a head start if you plan on doing this. So let's make an input. Let's give it an ID of search. Let's make a container for our results.

Let's give it an ID of search. Let's make a container for our results. Let's say results. And just give it a margin top here so we can see it. Okay. So let's put an event listener on the input. So let me comment this out for now. And let's do that. response.input equals document.querySelector('selector');

response.input equals document. And we'll just use querySelector here. And let's grab the input. Okay. And let's add an eventListener on that. input.addEventListener. Let's listen for keyup or keydown will work too. We'll stick to keyup. And let's grab the event here. And let's just see if this works.

And let's grab the event here. And let's just see if this works. Key up. Okay. So we can grab this and put it in here. And the thing we're searching for is whatever the user typed in. So that's going to be event.target.value. So we'll put that in here. Okay. And we can get rid of this.

Okay. And we can get rid of this. And now we want to loop over our results and make a new node for each of them. So we can use map for that. Let's make a variable called nodes. map over that. Or you can use forEach, doesn't matter. And we'll grab the user from each iteration. And then we'll make a new div. So let div equals document.createElement('div').

And then we'll make a new div. So let div equals document.createElement(Div). Okay. And let's put some text content in there. And we'll just put the user name. You can put the email in here too, if you want. I'll just take the name. And let's return that div. And let's see what we get here. Let's just console.log(nodes).

And let's see what we get here. Let's just console.log the nodes. And this should be a div with each one of the results. So let's try this. Let's refresh. Let's say AND. And that seems to work. Okay, cool. So now we just have to add it to our results div here. So let's make a variable called results, document.querySelector, results.

So now we just have to add it to our results div here. So let's make a variable called results, document.querySelector, results. Okay. And let's clear out the results first. So results.innerHTML is empty. And then we can append those nodes. results.append. And we want to use the spread operator and nodes. And that should do it. We should have a basic working version of Algolia's instant search.