In this tutorial, We will learn how to fulltext search using ajax in laravel. You can easily and simply use full-text search using ajax in laravel.


Follow the some steps:


Step 1:

Download Laravel 8 framework via composer

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


Step 2:

Download and Install Searchable Package via composer

composer require nicolaslopezj/searchable


Step 3:

Create full_text_searches table in your database and then insert some dummy data to search

CREATE TABLE `full_text_searches` (
  `CustomerID` int(11) NOT NULL,
  `CustomerName` varchar(250) NOT NULL,
  `Gender` varchar(30) NOT NULL,
  `Address` text NOT NULL,
  `City` varchar(250) NOT NULL,
  `PostalCode` varchar(30) NOT NULL,
  `Country` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;


Step 4:

connect to database using .env file

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=testing
DB_USERNAME=root
DB_PASSWORD=


Step 5:

Create Model

php artisan make:model Full_text_search --migration


app/Full_text_search.php

<?php

namespace App;

use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Illuminate\Database\Eloquent\Model;
use Nicolaslopezj\Searchable\SearchableTrait;

class Full_text_search extends Model
{
    use Notifiable;
    use SearchableTrait;

    protected $searchable = [
        'columns' => [
            'full_text_searches.CustomerName'  => 10,
            'full_text_searches.Gender'   => 10,
            'full_text_searches.Address'   => 10,
            'full_text_searches.City'    => 10,
            'full_text_searches.PostalCode'  => 10,
            'full_text_searches.Country'   => 10,
            'full_text_searches.id'    => 10,
        ]
    ];

    protected $fillable = [
        'CustomerName', 'Gender', 'Address', 'City', 'PostalCode', 'Country',
    ];
}


Step 6:

Create Controller 

php artisan make:controller Full_text_search_Controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\FullTextSearch;
use DataTables;

class FullTextSearchController extends Controller
{
    function index()
    {
     return view('fullText.fullTextSearch');
    }

    function action(Request $request)
    {
      if($request->ajax())
      {
          $data = FullTextSearch::search($request->get('full_text_search_query'))->get();

          return response()->json($data);
      }
    }
}


Step 7: 

Create View Blade File resources/views/full_text_search.blade.php

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Full Text Search in Laravel using Ajax Example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">    
            <br />
            <h3 align="center">Full Text Search in Laravel using Ajax Example</h3>
            <br />
            <div class="row">
                <div class="col-md-6">
                    <input type="text" name="full_text_search" id="full_text_search" class="form-control" placeholder="Search" value="">
                </div>
                <div class="col-md-2">
                    @csrf
                    <button type="button" name="search" id="search" class="btn btn-success">Search</button>
                </div>
            </div>
            <br />
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>Customer Name</th>
                            <th>Gender</th>
                            <th>Address</th>
                            <th>City</th>
                            <th>Postal Code</th>
                            <th>Country</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </body>
</html>


<script>
    $(document).ready(function () {

        load_data('');

        function load_data(full_text_search_query = '')
        {
            var _token = $("input[name=_token]").val();
            $.ajax({
                url: "{{ route('full-text-search.action') }}",
                method: "POST",
                data: {full_text_search_query: full_text_search_query, _token: _token},
                dataType: "json",
                success: function (data)
                {
                    var output = '';
                    if (data.length > 0)
                    {
                        for (var count = 0; count < data.length; count++)
                        {
                            output += '<tr>';
                            output += '<td>' + data[count].CustomerName + '</td>';
                            output += '<td>' + data[count].Gender + '</td>';
                            output += '<td>' + data[count].Address + '</td>';
                            output += '<td>' + data[count].City + '</td>';
                            output += '<td>' + data[count].PostalCode + '</td>';
                            output += '<td>' + data[count].Country + '</td>';
                            output += '</tr>';
                        }
                    } else
                    {
                        output += '<tr>';
                        output += '<td colspan="6">No Data Found</td>';
                        output += '</tr>';
                    }
                    $('tbody').html(output);
                }
            });
        }

        $('#search').click(function () {
            var full_text_search_query = $('#full_text_search').val();
            load_data(full_text_search_query);
        });

    });
</script>


Step 8:

Create route for Controller Method routes/web.php

<?php

Route::get('full-text-search', 'Full_text_search_Controller@index');
Route::post('full-text-search/action', 'Full_text_search_Controller@action')->name('full-text-search.action');
Route::get('full-text-search/normal-search', 'Full_text_search_Controller@normal_search')->name('full-text-search.normal-search');

?>


Run Laravel 8 Application

php artisan serve


Thanks, May this example will help you.