Laravel Autocomplete Search Example

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

Today now in this tutorial,I will create a very simple and short example of Ajax auto complete search in Laravel application. From here you can easily make a text box field auto complete in Laravel 8 application.

Here we see how to implement auto complete search also with Database in laravel  application with jquery typeahead js. Now in this laravel tutorial, i will share with you how we can implement auto complete search also with database by using jquery typeahead js example.

Here Bootstrap Typeahead JS is provided us a best way of user interface . So,here we can do this  easily by write some code of jquery ajax and we can make it dynamic auto complete search in laravel application. So now here we can easily do by use Typeahead JS with bootstrap.

Just need to follow bellow step to create simple auto complete search in laravel application.

Step 1: Install Laravel Project

At first, we need to download the laravel fresh setup. By Use this command we can download laravel project setup :

composer create-project --prefer-dist laravel/laravel blog
Step 2: Setup Database

So after the successfully install laravel Application. Go to your project .env file and then set up database credential and move next step :

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name 
DB_USERNAME=here database username
DB_PASSWORD=here database password 
Step 3: Create Migration

So now we will create a table posts then need to follow this command in your terminal:

php artisan make:migration create_posts_table 

Then it command will create migration file also for the posts table.

database/migrations/create_posts_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('image');
            $table->text('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

So next, now this command use to in your terminal then this setup will be create to in your database.

php artisan migrate
Step 4: Create Model

Next,we will create to model in our project. by bellow command :

php artisan make:model Post

It will be create to file in app/Model/Post.php model.

app/Model/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
      'title','image','body'
    ];
}
Step 5: Make Route

Now we need to create route in web.php file.

routes/web.php

//PostController
Route::get('post',array('as'=>'post.index','uses'=>'PostController@index'));
Route::get('autocomplete',array('as'=>'autocomplete','uses'=>'PostController@autocomplete'));
Step 6: Create Controller

Here we need to create a new controller name PostController. By use this command to your terminal.

php artisan make:controller PostController

app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Model\Post;

class PostController extends Controller
{
    public function index()
    {
    	return view('post');
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function autocomplete(Request $request)
    {
        $data = Post::select("title as name","image as img","body as desc")->where("title","LIKE","%{$request->input('query')}%")->get();

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

Step 7: Create View File

Now in this step we need to create blade view file.

resources/views/post.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Typehead</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
    <style type="text/css">
        img{
            border-radius: 3px;
        }
        p{
            color: #a1a1a1;
        }
        ul{
            width: 96%;
        }
    </style>
<body>
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <h5><strong>Laravel 7/6  Typeahead Search | Laravel Autocomplete Search Example</strong></h5>
            <input type="text" class="form-control typeahead">
        </div>
    </div>

</body>
<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>  
<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);
            });
        },
        highlighter: function (item, data) {
            var parts = item.split('#'),
                html = '<div class="row">';
                html += '<div class="col-md-2">';
                html += '<img src="/image/'+data.img+'"/ height="44px;" width="65px;">';
                html += '</div>';
                html += '<div class="col-md-10 pl-0">';
                html += '<span>'+data.name+'</span>';
                html += '<p class="m-0">'+data.desc+'</p>';
                html += '</div>';
                html += '</div>';

            return html;
        }
    });
</script>
</html>
Step 8: Run Development Server

Now you can run to laravel project in your teminal. By using bellow command

php artisan serve

then make to ulr:

http://localhost:8000/post

Read Also : Laravel 8 Eloquent Global Scope Tutorial Example

I hope it will help you. Also 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 →