How to Autocomplete using Bootstrap Typeahead JS In Laravel?

Today now in this post i will show you how to Autocomplete using Bootstrap Typeahead JS In Laravel?Auto complete is must needed when we are dealing with any big data table, as like we have a products table and there is thousands of records so it’s not difficult to give this on drop-down box, but it is the better if we can use here Autocomplete instead of select box.

Now In this example i will use Bootstrap Typeahead JS plugin for the auto-complete, Typeahead.js plugin also provide good layout by using bootstrap so it look pretty good. we can also implement autocomlete in our laravel project just need to following few step.

Step 1: Create items table and model

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

php artisan make:model Item -m

After this command we will find one file in the following path database/migrations and we need to put bellow code in our migration file for create the items table.

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateItemsTable extends Migration
{
    public function up()
    {
        Schema::create('items', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::drop("items");
    }
}

also create “items” model for items table, so first put the bellow content in item.php file path app/Models/Item.php :

app/Item.php

namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use DB;
class Item extends Model
{
    public $fillable = ['title','description'];
}
Step 2: Add Route

Now We need to add the two new route one for the search view call and the another for autocomplete. So add the two route in our web.php file:

routes/web.php

Route::get('search',array('as'=>'search','uses'=>'SearchController@search'));
Route::get('autocomplete',array('as'=>'autocomplete','uses'=>'SearchController@autocomplete'));
Step 3: Create controller

Good Ok, now we need to create a new controller as SearchController in this path app/Http/Controllers/SearchController.php. Here this controller will manage the search page and autocoplete json, so put the bellow content in the controller file:

app/Http/Controllers/SearchController.php

namespace App\Http\Controllers;


use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\Item;


class SearchController extends Controller
{


    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function search()
    {
        return view('search');
    }


    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function autocomplete(Request $request)
    {
        $data = Item::select("title as name")->where("title","LIKE","%{$request->input('query')}%")->get();
        return response()->json($data);
    }
}
Step 4: Create View

Now in this step we need create a search.blade.php file in resources directory.

resources/views/search.blade.php

@extends('layouts.app')


@section('content')


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<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>  


<div class="container">


    <h1>Laravel  Autocomplete using Bootstrap Typeahead JS-CodingsPoint</h1>   
    <input class="typeahead form-control" style="margin:0px auto;width:300px;" 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>


@endsection

Read Also : How to Create Custom Blade Directive in Laravel?

Thanks for read. I hope it help you. For more you can 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 →