Laravel Autocomplete Search with Bootstrap Typeahead JS
Autocomplete search is required when we work with large database search items. Because it's not user friendly to use dropdown for every item. So when we have to large data searching we use Autocomplete Search. Here I've used popular autocomplete search using Bootstrap Typehead JS.
1. Make a Model and a Table named "Item" with the following command.
php artisan make:model Item -m
2. Change the Model Item.php with the following code:
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Item extends Model { public $fillable = ['title','description']; }
3. Change the items migration file ( you can get it in database/migrations directory with the following code:
<?php
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('title');
$table->text('description');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop("items");
}
}
4. Now run the following command:
php artisan migrate
5. Put some demo data in database with the name and description in items table.
6. Now we have to create the route:
routes.php
<?php
Route::get('/search',[
'uses' => 'SearchController@search',
'as'=>'search'
]);
Route::get('/autocomplete',[
'uses'=>'SearchController@autocomplete',
'as'=>'autocomplete'
]);php artisan make:controller SearchController
8. Change the SearchController.php code with the following code:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Item;
class SearchController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function search()
{
return view('search');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function autocomplete(Request $request)
{
$data = Item::select("title as name")->where("title","LIKE","%{$request->input('query')}%")->get();
return response()->json($data);
}
}<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<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</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>10. That's it, now when you search the route and write a name of keyword in searchBox you might have seen the relevant search name like the following:
ExpressTech Software Solutions is a Laravel Development Company, we are having a group of master Dedicated Laravel Developers with great Laravel Experience. Contact us to find more about laravel software. Contact@ExpressTechSoftwares.Com or +91-9806724185
ReplyDelete