Laravel with Packages | Laravel Typeahead Search Tutorial

Step 1: Download Laravel

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create Migration and Model

php artisan make:migration 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->bigIncrements('id');
$table->string('name');
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('items');
}
}
php artisan migrate
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Item extends Model
{

}

Step 3: Create Route

Route::get('search', 'SearchController@index')->name('search');
Route::get('autocomplete', 'SearchController@autocomplete')->name('autocomplete');

Step 4: Create Controller

<?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

<!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>
php artisan serve
http://localhost:8000/search

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store