Ajax Autocomplete Search in Laravel 7

Ajax Autocomplete Search in Laravel 7

In this post we will give you information about Ajax Autocomplete Search in Laravel 7. Hear we will give you detail about Ajax Autocomplete Search in Laravel 7And how to use it also give you demo for it if it is necessary.

Today, i will let you know example of laravel 7 autocomplete search from database. let’s discuss about ajax autocomplete textbox in laravel 7 using jquery. you can understand a concept of bootstrap typeahead autocomplete ajax laravel 7. This post will give you simple example of laravel 7 typeahead ajax autocomplete example. Alright, let’s dive into the steps.

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 7 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 7 application.

Step 1 : Download Laravel 7

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

In this step we have to create migration for items table using Laravel 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 IlluminateSupportFacadesSchema;

use IlluminateDatabaseSchemaBlueprint;

use IlluminateDatabaseMigrationsMigration;



class CreateItemsTable extends Migration

{

    /**

     * Run the migrations.

     *

     * @return void

     */

    public function up()

    {

        Schema::create('items', function (Blueprint $table) {

            $table->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 IlluminateDatabaseEloquentModel;



class Item extends Model

{



}


Also see:Laravel 7 CRUD Example | Laravel 7 Tutorial For Beginners

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', 'SearchController@index')->name('search');

Route::get('autocomplete', 'SearchController@autocomplete')->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 AppHttpControllers;



use IlluminateHttpRequest;

use AppItem;



class SearchController extends Controller

{

    /**

     * Display a listing of the resource.

     *

     * @return IlluminateHttpResponse

     */

    public function index()

    {

        return view('search');

    }



    /**

     * Show the form for creating a new resource.

     *

     * @return IlluminateHttpResponse

     */

    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 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 7 Autocomplete Search using Bootstrap Typeahead JS - ItSolutionStuff.com</title>

    <link rel="stylesheet" href="#" />

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

    <h1>Laravel 7 Autocomplete Search using Bootstrap Typeahead JS - ItSolutionStuff.com</h1>   

    <input  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:

Also see:How to Make PDF File in Laravel 7?
http://localhost:8000/search


I hope it can help you…

Hope this code and post will helped you for implement Ajax Autocomplete Search in Laravel 7. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  58  =  61

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US