Skip to content

All topics  /  Laravel

Laravel Autocomplete Search From Database

Laravel ·

Teams applying “Laravel Autocomplete Search From Database” in a production project can use the official product overview to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

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="//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...

More on this topic