Laravel 5 Autocomplete using Bootstrap Typeahead JS Example with Demo

Preview:

Step 1: Create items table and module

In First step we have to create migration for items table using Laravel 5 php artisan command, so first fire bellow command:

php artisan make:migration create_items_table

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

use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;
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");
    }
}

After craete “items” table you should craete Item model for items, so first create file in this path app/Item.php and put bellow content in item.php file:

app/Item.php

namespace App;
use IlluminateDatabaseEloquentModel;
use DB;
class Item extends Model
{
    public $fillable = ['title','description'];
}

Step 2: Add Route

We need to add two route one for search view call and another for autocomplete so add two route in your routes.php file:

app/Http/routes.php

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

Step 3: Create controller

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

app/Http/Controllers/SearchController.php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppHttpControllersController;
use AppItem;

class SearchController extends Controller
{

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

    /**
     * Show the form for creating a new resource.
     *
     * @return IlluminateHttpResponse
     */
    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

In this step we have create 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 >

    <h1>Laravel 5 Autocomplete using Bootstrap Typeahead JS</h1>   
    <input  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