Autocomplete Search From Database Laravel 8
In this tutorial, we will learn how to dynamic autocomplete search using the Typeahead js in laravel 8. This tutorial goes into detail on laravel 8 typeahead autocomplete ajax.
you will learn simply about laravel 8 typeahead ajax autocomplete in jquery. You just need some steps to create a laravel 8 jquery ajax autocomplete in your project.
This post uses Bootstrap Typeahead JS provides a simple user interface so, we can easily write a code of simple jquery, ajax and make it a dynamic autocomplete search in laravel 8. we can easily use Typeahead JS with bootstrap.
Use Jquery autocomplete is easy to use to learn big data like you have a product table and many thousands of records so it's not possible to give a drop-down box, but it is better if we use autocomplete instead of a select box.
So, Follow the bellow step to create a simple autocomplete search with laravel 8 application.
We need to get fresh Laravel 8 version application using the bellow command, So open your command prompt and run bellow command:
composer create-project --prefer-dist laravel/laravel blog
In this step, we have to create a migration for items table using Laravel 8 PHP artisan command, so first fire bellow command:
php artisan make:migration create_items_table
Then, After this command you will find one file in the following path "database/migrations" and you have to put bellow code in your migration file to create an items table.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateItemsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('items', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('items');
}
}
Then after, simply run the migration:
php artisan migrate
After creating the "items" table you should create an Item model for items, so first create a file in this path "app/Models/Item.php" and put bellow content in item.php file:
app/Models/Item.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Item extends Model
{
use HasFactory;
protected $fillable = [
'name'
];
}
We need to create routes for display view and ajax method. so open your "routes/web.php" file and add the following route.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SearchController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('search', [SearchController::class, 'index'])->name('search');
Route::get('autocomplete', [SearchController::class, 'autocomplete'])->name('autocomplete');
In this step, we have to create a new controller as SearchController and we have also need to add two methods index() and autocomplete() on that controller like as you can see below:
app/Http/Controllers/SearchController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Item;
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 = Item::select("name")
->where("name","LIKE","%{$request->query}%")
->get();
return response()->json($data);
}
}
In the last step, let's create search.blade.php for layout and lists all items code here and put the following code:
resources/views/search.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Search From Database Laravel 8 - phpcodingstuff.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<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>
</head>
<body>
<div class="container">
<h1>Laravel 8 Autocomplete Search using Bootstrap Typeahead JS - ItSolutionStuff.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 running this example. so run bellow command for a quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/search
I hope it can help you...
I followed all the steps but it gets me a 500 internal server error