Laravel 8 Autocomplete Search using Typehead JS Example

Laravel 8 Autocomplete Search using Typehead JS Example

Laravel 8 autocomplete search using Typehead JS. In this tutorial, we will shwo you how to implement autocomplete search with Database in laravel 8 app with jquery typeahead js

And you will learn how to implement autocomplete search using jquery typeahead js simple and easy way. Just follow the few steps and implement autocomplete search in your laravel Application.

Jquery Typeahead js is bootstrap library that is work for autocomplete search in laravel . Using typeahead js you can display the search results and it also provides several options for customization.

Laravel 8 Typehead JS – AutoComplete Textbox Search

  • Step 1 – Install Laravel 8 App
  • Step 2 – Connecting App to Database
  • Step 3 – Generate Fake Records
  • Step 4 – Add Routes
  • Step 5 – Create Controller & Methods
  • Step 6 – Create Blade View
  • Step 7 – Start Development Server
  • Step 8 – Test This App

Step 1 – Install Laravel 8 App

Now, execute the following command on terminal to download laravel 8 app:

composer create-project --prefer-dist laravel/laravel blog

Step 2 – Connecting App to Database

After successfully install laravel Application, Go to your project .env file and set up database credential and move next step :

 DB_CONNECTION=mysql 
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

Step 3 – Generate Fake Records

Before add fake records in database first migrate the table in database using the below command :

php artisan migrate

Add fake records in our database. use the below command and add 100 fake records in database :

php artisan tinker 

factory(App\User::class, 100)->create();

Step 4 – Add Routes

Now create two routes one for show search input box and second for autocomplete search using jquery typeahead js autocomplete method :

use App\Http\Controllers\AutoCompleteController;

Route::get('search', [AutoCompleteController::class, 'index']);
Route::get('autocomplete', [AutoCompleteController::class, 'search']);

Step 5 – Create Controller & Methods

Execute the following command on terminal to create a controller name AutoCompleteController.php file:

php artisan make:controller AutoCompleteController

After successfully create controller go to app/controllers/AutoCompleteController.php and put the below code :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

class AutoCompleteController extends Controller
{

    public function index()
    {
        return view('search');
    }

    public function search(Request $request)
    {
          $search = $request->get('term');
     
          $result = User::where('name', 'LIKE', '%'. $search. '%')->get();

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

Step 6 – Create Blade View

In this step, create blade view file. Go to app/resources/views and create one file name search.blade.php .

After create blade file put the below html code here with jquery ui and css library file :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Autocomplete Search Using Typeahead JS - Tutsmake.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
 <style>
    .container{
    padding: 10%;
    text-align: center;
   } 
 </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-12"><h2>Laravel AutoComplete Search Using Typeahead JS</h2></div>
        <div class="col-12">
            <div id="custom-search-input">
                <div class="input-group">
                    <input id="search" name="search" type="text" class="form-control" placeholder="Search" />
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var route = "{{ url('autocomplete') }}";
    $('#search').typeahead({
        source:  function (term, process) {
        return $.get(route, { term: term }, function (data) {
                return process(data);
            });
        }
    });
</script>
  
</body>
</html>

And put some script code in search.blade.php file. The script code will work to search a data from database and return data to our view file this ajax method full field over autocomplete search example.

Step 7 – Start Development Server

Execute the following command on termial to start development server:

 php artisan serve

If you want to run the project diffrent port so use this below command

php artisan serve --port=8080

Step 8 – Test This App

Open broswer and hit the following url on it:

Http://localhost:8000/search

Conclusion

In this tutorial , You have leaned successfully how to implemented autocomplete search in laravel 8 application using typeahead js. our examples run quickly.

Recommended Laravel Posts

If you have any questions or thoughts to share, use the comment form below to reach us.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *