Laravel autocomplete typeahead search example from scratch


In this article, i will show you how to create jquery ajax autocomplete using typeahead js plugin in Laravel 5 application.

If you have thousands of data in database table and you require to display in drop-down or something like to choose that data. So If you use drop-down it load and it's hard to find specific record. So At that time you can simply use jquery autocomplete in your application. In this example we will use typeahead jquery plugin for autocomplete.

typeahead is a jquery powerful plugin. typeahead provide make looks nice autocomplete layout and also several other options. So in this example you can easily learn how to implement autocomplete in laravel. You will have preview as like bellow screen shot. Let's follow few step to do.

Layout:

Step 1: Create posts table and model

We are going to scratch so, in first step we require to create new "posts" table in our database. So first run bellow command to create posts table migration:

php artisan make:migration create_posts_table

After run above command you will get a migration file in following path database/migrations and now add below line of code in your migration file for create posts table.

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->timestamps();

});

}

/**

* Reverse the migrations.

*

* @return void

*/

public function down()

{

Schema::drop("posts");

}

}

Ok, now you can run above migration by following command:

php artisan migrate

Next, we will create a Model for posts Table in following path app/Post.php

Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $fillable = ['name'];

}

Step 2: Add Routes

In this step, we should add two new route in our laravel app. One for generate layout and another for ajax method. So let's add two new route as bellow:

routes/web.php

Route::get('autocomplete-search',array('as'=>'autocomplete.search','uses'=>'AutoCompleteController@index'));

Route::get('autocomplete-ajax',array('as'=>'autocomplete.ajax','uses'=>'AutoCompleteController@ajaxData'));

Step 3: Create Controller

Next, we should create new AutoCompleteController controller and put bellow code on that file:

app/Http/Controllers/AutoCompleteController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Post;

class AutoCompleteController extends Controller

{

public function index()

{

return view('autocomplete');

}

public function ajaxData(Request $request){

$query = $request->get('query','');

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

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

}

}

Step 4: Create Blade File

In last step, we have to create autocomplete.blade.php file on resources folder. In blade file we will add typeahead plugin code and also jquery ajax code. So, let's copy bellow code and put on that file:

resources/views/autocomplete.blade.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Laravel 5.4 Bootstrap Typeahead Autocomplete</title>

<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>

</head>

<body>

<div class="container">

<div class="row">

<div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-3">

<div class="panel panel-primary">

<div class="panel-heading">Laravel 5.4 Bootstrap Typeahead Autocomplete</div>

<div class="panel-body">

<div class="form-group">

{!! Form::text('search_text', null, array('placeholder' => 'Search Text','class' => 'form-control','id'=>'search_text')) !!}

</div>

</div>

</div>

</div>

</div>

</div>

<script type="text/javascript">

var url = "{{ route('autocomplete.ajax') }}";

$('#search_text').typeahead({

source: function (query, process) {

return $.get(url, { query: query }, function (data) {

return process(data);

});

}

});

</script>

</body>

</html>

Ok, now you can run your laravel app and check...Enjoy....


May 10, 2017 | 15550 Viewer | Category : PHP Laravel Bootstrap JQuery JQuery Plugin Ajax

Related Posts: