Laravel 7/6 Typeahead Search | Laravel Autocomplete Search Example

Laravel 6 , Laravel , jquery , Laravel 7

Nicesnippets

19863

11-01-2020


Laravel 7/6 Typeahead Search | Laravel Autocomplete Search Example

Hi Guys,

In this tutorial,I will create very simple example of Ajax autocomplete search in Laravel 7/6. You can easily make text box field autocomplete in Laravel 7/6 application.

How to implement autocomplete search with Database in laravel 7/6 app with jquery typeahead js. In this laravel tutorial, We will share with you how to implement autocomplete search with database using jquery typeahead js example.

Bootstrap Typeahead JS provide way of user interface so, we can easily write code of jquery ajax and make it dynamic autocomplete search in laravel 7/6 application. we can easily use Typeahead JS with bootstrap.

Follow bellow step to create simple autocomplete search with laravel 7/6 application.

Step 1: Install Laravel Project

First, you need to download the laravel fresh setup. Use this command then download laravel project setup :

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

Step 2: Setup Database

After successfully install laravel 7/6 Application, Go to your project .env file and 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

Now you will create a table posts then follw this command in your terminal:

php artisan make:migration create_posts_table

It command will create migration file 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');

}

}

Next,this command use to in your terminal then this setup create to in your database.

php artisan migrate

Step 4: Create Model

Next,you will create to model in project.bellow this command :

php artisan make:model Post

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

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

you can create to 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

you need to create a controller name PostController.this command use to your terminal.

php artisan make:controller PostController

app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\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

In this step you 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

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

php artisan serve

then make to ulr:

http://localhost:8000/post

It will help you....


Recommended Posts