10-Apr-2023
.
Admin
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...
#Laravel 6
#Laravel
#Laravel 7