Laravel with Packages | Laravel Typeahead Search Tutorial
There is a simple example of a laravel autocomplete typeahead. I am going to write an example of how to create autocomplete search using laravel typeahead js. you will see how we can create a laravel typeahead search.
Just follow the below step to create typeahead with laravel 6, laravel 7, laravel 8, and laravel 9 applications.
Bootstrap Typeahead JS provides a way of the user interface so, we can easily write code of jquery ajax and make it dynamic autocomplete search in laravel application. we can easily use Typeahead JS with bootstrap.
Jquery autocomplete is a must if you are dealing with big data like you have items or products table and 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.
Follow the below step to create a simple autocomplete search with the laravel application.
Step 1: Download Laravel
first of all, we need to get a fresh Laravel version application using the below command, So open your terminal OR command prompt and run the below command:
composer create-project --prefer-dist laravel/laravel blogStep 2: Create Migration and Model
In this step, we have to create migration for items table using Laravel PHP artisan command, so first fire bellow command:
php artisan make:migration create_items_tableAfter this command you will find one file in the following path "database/migrations" and you have to put the below code in your migration file for creating 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->bigIncrements('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 migrateAfter creating the “items” table you should create an Item model for items, so first create a file in this path “app/Item.php” and put the below content in the item.php file:
app/Item.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Item extends Model
{
}Step 3: Create Route
In this step, we need to create routes for the display view and ajax method. so open your “routes/web.php” file and add the following route.
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 a new controller as SearchController and we also need to add two methods index() and autocomplete() on that controller as you can see below:
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->query}%")
->get();
return response()->json($data);
}
}Step 5: Create View File
In the Last step, let’s create search.blade.php(resources/views/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>Laravel Autocomplete Search using Bootstrap Typeahead JS - raviyatechnical</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 Autocomplete Search using Bootstrap Typeahead JS - raviyatechnical</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. Now we are ready to run our example so run the below command for a quick run:
php artisan serveNow you can open the below URL on your browser:
http://localhost:8000/searchI hope it can help you...