Laravel 7 Autocomplete Search Example

Laravel 7

Nicesnippets

18293

06-03-2020


Laravel 7 Autocomplete Search Example

This example is focused on ajax autocomplete search laravel 7. you can understand a concept of ajax autocomplete textbox in laravel 7 using jquery. you'll learn bootstrap typeahead autocomplete ajax laravel 7. step by step explain laravel 7 typeahead ajax autocomplete example. you will do the following things for laravel 7 jquery ajax autocomplete 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 application. we can easily use Typeahead JS with bootstrap.

Follow bellow step to create simple autocomplete search with laravel 7 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 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

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

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: 97%;

}

</style>

<body>

<div class="row">

<div class="col-md-8 offset-md-2">

<h5><strong>Laravel 7 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