Laravel 10 Typeahead JS Autocomplete Search Example

Typeahead.js is a popular autocomplete library that allows users to easily search for data within a database or other data source. In this article, we will explore how to implement a Laravel 10 Typeahead.js Autocomplete Search Example.

Prerequisites

Before getting started, you should have the following installed:

Laravel 10.x
Composer
Node.js
NPM

Step 1: Install Laravel 10

First, we need to install Laravel 10. You can do this by running the following command in your terminal:

composer create-project --prefer-dist laravel/laravel laravel-typeahead-example

This will create a new Laravel project named “laravel-typeahead-example”.

Step 2: Install Typeahead.js

Next, we need to install Typeahead.js. You can do this by running the following command in your terminal:

npm install typeahead.js --save

This will install Typeahead.js and save it to your project’s package.json file.

Step 3: Create a Route and Controller

Create a new route and controller to handle the search requests. In your routes/web.php file, add the following route:

Route::get('/search', 'SearchController@search');

Next, create a new controller using the following command:

php artisan make:controller SearchController

In your newly created controller, add the following code:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class SearchController extends Controller
{
    public function search(Request $request)
    {
        $query = $request->get('query');

        $posts = Post::where('title', 'LIKE', '%' . $query . '%')
                      ->orWhere('body', 'LIKE', '%' . $query . '%')
                      ->get();

        return response()->json($posts);
    }
}

This code will search for posts in the database that match the query parameter passed in the request and return them as a JSON response.

Step 4: Create a View

Create a new view file in the resources/views directory called search.blade.php. In this file, add the following HTML code:

<div class="typeahead__container">
    <div class="typeahead__field">
        <span class="typeahead__query">
            <input class="js-typeahead" name="query" type="search" placeholder="Search">
        </span>
        <span class="typeahead__button">
            <button type="submit">
                <i class="fa fa-search"></i>
            </button>
        </span>
    </div>
</div>

This code will create an input field with a search button using the Typeahead.js class names.

Step 5: Initialize Typeahead.js

Next, we need to initialize Typeahead.js in our view file. Add the following JavaScript code to the bottom of the search.blade.php file:

<script>
    $(document).ready(function() {
        var engine = new Bloodhound({
            remote: {
                url: '/search?query=%QUERY%',
                wildcard: '%QUERY%'
            },
            datumTokenizer: Bloodhound.tokenizers.whitespace,
            queryTokenizer: Bloodhound.tokenizers.whitespace
        });

        $('.js-typeahead').typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        }, {
            name: 'posts',
            source: engine.ttAdapter(),
            display: 'title',
            templates: {
                empty: [
                    '<div class="empty-message">',
                    'No results found.',
                    '</div>'
                ].join('\n'),
                suggestion: function(data) {
                   
                return '<div>' + data.title + '</div>';
            }
        }
    });
});
</script>

This code will initialize Typeahead.js and set up a Bloodhound engine to search for posts using the remote URL we defined in the SearchController. The display property specifies which property of the search results to display in the dropdown list, and the suggestion function formats each suggestion in the dropdown.

Step 6: Test the Autocomplete Search

Finally, start your Laravel development server using the following command:

php artisan serve

Open your web browser and go to http://localhost:8000/search. You should see the search input field with a search button. Start typing a search term, and the Typeahead.js autocomplete feature should start suggesting posts that match the search term.

Conclusion

In this article, we explored how to implement a Laravel 10 Typeahead.js Autocomplete Search Example. With this feature, users can easily search for data within a database or other data source, providing a better user experience. By following the steps outlined in this article, you should now be able to implement this feature in your own Laravel projects.