Laravel Autocomplete Search From Database

Laravel 6 , Laravel , Laravel 7

Nicesnippets

3426

16-05-2020


Hi Dev,

Today, I will learn you search dropdown autocomplete from database in laravel. You just follow step by step to create autocomplete search box from database with jquery in laravel.

In this example I will use Bootstrap Typeahead JS plugin for auto-complete, Typeahead. You can implement autocomplete in your laravel application just following few step.

Step 1 : Install laravel Fresh App


In this step, You can install laravel fresh app using bellow command.

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

Step 2 : Create Model and Table

In this step, we have create model and table migration, So bellow command used to create table migration.

php artisan make:migration create_blogs_table

After this You will find one file in following path "database/migration" and you have to put bellow code.

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateBlogsTable extends Migration

{

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

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

$table->increments('id');

$table->string('name');

$table->timestamps();

});

}

/**

* Reverse the migrations.

*

* @return void

*/

public function down()

{

Schema::dropIfExists('blogs');

}

}

Then after, Simply run bellow command

php artisan migrate

After create "blogs" table you should create Blog model for blogs.

app/Blog.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Blog extends Model

{

}

Step 3 : Create Route

In this step you can create route for display view and ajax method and put bellow code.

routes/web.php

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

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

Step 4 : Create Controller

In this step we have to create new controller as SearchController and put bellow code.

app/Http/Controllers/SearchController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Blog;

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 = Blog::select("name")

->where("name","LIKE","%{$request->input('query')}%")

->get();

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

}

}

Step 5 : Create View File

In this step You can create laravel blade file for display view and put bellow code.

resources/views/search.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel Autocomplete Search From Database - NiceSnippets.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 Autocomplete Search From Database - NiceSnippets.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>

Make sure you have some dummy data on your items table before run this example. Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/search

It will help you...


Recommended Posts