How to Create Ajax Autocomplete Search from Database in Laravel 6

How to Create Ajax Autocomplete Search from Database in Laravel 6

In this post, you'll learn how to create jquery ajax autocomplete search textbox from database in Laravel 6 using typeahead

Originally published at https://itsolutionstuff.com

I will create very simple example of Ajax autocomplete search in Laravel 6. You can easily make text box field autocomplete in Laravel 6 application.

Bootstrap Typeahead JS provide way of user interface so, we can easily write code of Jquery Ajax and make it dynamic autocomplete search in Laravel 6 application. we can easily use Typeahead JS with bootstrap.

Jquery autocomplete is 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 drop-down box, but it is better if we use autocomplete instead of select box.

Follow bellow step to create simple autocomplete search with Laravel 6 application.

Step 1 : Download Laravel 6

first of all we need to get fresh Laravel 6 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 Migration and Model

In this step we have to create migration for items table using Laravel 6 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->bigIncrements('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: Create 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', '[email protected]')->name('search');
Route::get('autocomplete', '[email protected]')->name('autocomplete');

Step 4: Create Controller

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")
            -&gt;where("name","LIKE","%{$request-&gt;query}%")
            -&gt;get();

    return response()-&gt;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 6 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 6 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:

Read Also: Laravel 6 Image Upload Tutorial

http://localhost:8000/search

I hope it can help you...

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow me on Facebook | Twitter

Further reading

Laravel 5.8 Tutorial for Beginners

Upgrading Laravel To 6.0 From 5.8

Laravel 6 Release New Features and Upgrade

What’s New in Laravel 6.0

Laravel 6 CRUD Application Tutorial

Laravel 6 Image Upload Tutorial

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

PHP Web Application Development Company

As a top **PHP Web Application Development Company in USA**[https://www.dataeximit.com/php-development-services/](https://www.dataeximit.com/php-development-services/ "https://www.dataeximit.com/php-development-services/"), we at Data EximIT have...

Top Ajax Development Companies | Hire Ajax Developers

Here is the list of proficient AJAX development service providers. TopDevelopers has keenly fulfilled your requirement and brought in the list of expert AJAX developers in the market to assist you in your next big project. The top listed AJAX...

Advantages of Hiring PHP Developer for your Website Project

PHP - Hypertext pre-processor, a scripting language used by many people in developing web pages, but most of us are unaware even of the full form. To train someone and make them learn this whole language is as difficult and time-consuming as it is...