November 5, 2023
Category : PHP
Laravel
Bootstrap
jQuery
Ajax
Typeahead JS
Laravel 5.7 Autocomplete Search from Database using Typeahead JS
Today, I write tutorial on dynamic search dropdown autocomplete from database using bootstrap typeahead js in laravel 5.6 app. You have to just follow few step to create autocomplete search text box from database with jquery ajax in laravel 5.7.
Ajax Autocomplete is must if you are dealing with big data table, like you have items or products table and thousands of records so it's not possible to give drop-down box, but it is better if we use Autocomplete instead of select box.
In this example we will use Bootstrap Typeahead JS plugin for auto-complete, Typeahead.js plugin provide good layout using bootstrap so it pretty good. You can implement autocomplete in your laravel application just following few step.
Content Overview
Step 1 : Install Laravel 5.7
first of all we need to get fresh Laravel 5.7 version application using bellow command, So open your terminal OR command prompt and run bellow command:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Create Table and Model
In this step we have to create migration for items table using Laravel 5.7 php artisan command, so first fire bellow command:
php artisan make:migration create_items_table
After this command you will find one file in following path "database/migrations" and you have to put bellow code in your migration file for create 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->increments('id');
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('items');
}
}
Then after, simply run migration:
php artisan migrate
After create "items" table you should create Item model for items, so first create file in this path "app/Item.php" and put bellow content in item.php file:
app/Item.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Item extends Model
{
}
Step 3: Add Route
In this is step we need to create routes for display view and ajax method. so open your "routes/web.php" file and add following route.
routes/web.php
Route::get('search', 'SearchController@index')->name('search');
Route::get('autocomplete', 'SearchController@autocomplete')->name('autocomplete');
Step 4: Create SearchController
In this step, we have to create new controller as SearchController and we have also need to add two methods index() and autocomplete() on that controller like as you can see bellow:
app/Http/Controllers/SearchController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\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->input('query')}%")
->get();
return response()->json($data);
}
}
Step 5: Create View File
In Last step, let's create search.blade.php(resources/views/search.blade.php) for layout and lists all items code here and put following code:
resources/views/search.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 5.7 Autocomplete Search using Bootstrap Typeahead JS - ItSolutionStuff.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 5.7 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 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
I hope it can help you...
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
;void(0);){kind=link}
;void(0);){kind=link}