How to Autocomplete Textbox in Laravel 8 with Ajax?

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

Hello Dev’s
Today in this tutorial, i will show you how to create dynamic jquery auto complete search from database by using laravel 8 application. We can create manual ajax autocomplete textbox by using laravel 8 by using Typeahead.js plugin.

Bootstrap Typeahead JS provide a good way of user interface. So, we can easily write code with  jquery ajax and make it dynamic Autocomplete Textbox in Laravel 8 with Ajax in our laravel 8 application. You can easily use Typeahead JS with bootstrap.

Jquery auto complete is must if we are dealing with big data, like you have items or products table and thousands of records on there. So it’s not possible to give drop-down box. But it is better if we just use auto complete instead of select box.

Just Follow bellow step to create simple auto complete search with laravel 8 application.

Step 1 : Install Laravel 5.8

First of all we need a fresh Laravel 8 version application by using bellow command. So open your terminal OR command prompt and then run bellow command:

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

Read Also : How to use Union query with Laravel Eloquent?

Step 2: Create Table and Model

Now in this step we need to create a model with migration for items table using Laravel 8 php artisan command, so at first to we need fire bellow command:

php artisan make:model Item -m

After fire this command you will find one new file in following path “database/migrations”. Now you have to put bellow code in your migration file for create items table.

<?php
  
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
  
class CreateItemsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('items', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('items');
    }
}

Then after, simply run migration:

php artisan migrate

Read Also : Laravel 8 Pagination by using Ajax Example

After create “items” table also we create a Item model for items table. So now just put bellow content in item.php file:

app/Item.php

<?php
  
namespace App;
   
use Illuminate\Database\Eloquent\Model;
  
class Item extends Model
{
       
}

Step 3: Add Route

Now in this is step we just need to create a routes for display our view files and ajax method. So now just open your “routes/web.php” file and then add following route.

routes/web.php

Route::get('search', 'SearchController@index')->name('search');
Route::get('autocomplete', 'SearchController@autocomplete')->name('autocomplete');

Step 4: Create SearchController

Here in this step, we have to create a new controller file as SearchController by using bellow command.

php artisan make:controller SearchController 

And we have also need to add two methods index() and autocomplete() on that controller like as you can see bellow:

app/Http/Controllers/SearchController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Item;
  
class SearchController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('search');
    }
  
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function autocomplete(Request $request)
    {
        $data = Item::select("name")
                ->where("name","LIKE","%{$request->input('query')}%")
                ->get();
   
        return response()->json($data);
    }
}

Step 5: Create View File

This is our Last step, in this step just create search.blade.php in location (resources/views/search.blade.php) for layout and also lists all items code here and put following code:

resources/views/search.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Autocomplete Search using Bootstrap Typeahead JS - Codingspoint.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="http://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>
</head>
<body>
   
<div class="container">
    <h1>Laravel 8 Autocomplete Search using Bootstrap Typeahead JS - Codingspoint.com</h1>   
    <input class="typeahead form-control" type="text">
</div>
   
<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get(path, { query: query }, function (data) {
                return process(data);
            });
        }
    });
</script>
   
</body>
</html>

Also make sure that you have some dummy data on your items table before run this application. Then now we are full ready to run our application so run bellow command for quick run:

php artisan serve

Read Also : How to store all record in laravel Cache?

Now you can open bellow URL on your browser:

http://localhost:8000/search

Thanks for read this, I hope it will you. You can also follow us on Facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →