Full Text Search with Ajax in Laravel 9


Share:
 | Published By: Admin | Published On: May 03, 2022 | Category: Laravel 9

Hi Guys,

In this example,I will learn you how to use full text search using ajax in laravel 9.you can easy and simply use full text search using ajax in laravel 9.

This is one more post on Laravel 9 and in this post you can find how to implement Full Text Search in Laravel 9 framework by using Ajax with Searchable Laravel 9 package. If you wanted to learn how to make Full Text Search in you Laravel 9 application? If yes, then this post will help you can learning this topic. Here in this post we have share tutorial on How to create Full Text Search by using "nicolaslopezj/searchable" package with Ajax in Laravel 9 framework. So, User can get searchable data on web page without refresh of web page, because here we have use Ajax in Laravel 9 framework.

You have to know what is Full Text Search. So, Full Text Search is a one type of Search method, which search data on every word of request in your database. Most of Search Engines has been used Full Text Search technique for search data on every word of search request and search result on web page. It is more advance level for search a data in database.

For make any Laravel 9 application, first we need to download and install Laravel 9 framework. So, in this step of Laravel 9 tutorial, we have to go command prompt and go directory in which we want to download load and install Laravel 9 framework. We have to write and run following command.

Step 1: Download Laravel

Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.

composer create-project laravel/laravel example-app
Step 2: Install Searchable Package

In this Laravel 9 tutorial, We need to make Full text search feature in Laravel 9 application. For this here we have use "nicolaslopezj/searchable" package. For this we have to go command prompt and run following command. This command will download and install this searchable package in Laravel 9 application.

composer require nicolaslopezj/searchable
Step 3: Create Database Connection

Before making Mysql Database connection, first we need to create table in your database. For this, you have to run following SQL script.

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;

--
-- Dumping data for table `full_text_searches`
--

INSERT INTO `full_text_searches` (`CustomerID`, `CustomerName`, `Gender`, `Address`, `City`, `PostalCode`, `Country`) VALUES
(1, 'Maria Anders', 'Female', 'Obere Str. 57', 'Berlin', '12209', 'Germany'),
(2, 'Ana Trujillo', 'Female', 'Avda. de la Construction 2222', 'Mexico D.F.', '5021', 'Mexico'),
(3, 'Antonio Moreno', 'Male', 'Mataderos 2312', 'Mexico D.F.', '5023', 'Mexico'),
(4, 'Thomas Hardy', 'Male', '120 Hanover Sq.', 'London', 'WA1 1DP', 'United Kingdom'),
(5, 'Paula Parente', 'Female', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
(6, 'Wolski Zbyszek', 'Male', 'ul. Filtrowa 68', 'Walla', '01-012', 'Poland'),
(7, 'Matti Karttunen', 'Male', 'Keskuskatu 45', 'Helsinki', '21240', 'Finland'),
(8, 'Karl Jablonski', 'Male', '305 - 14th Ave. S. Suite 3B', 'Seattle', '98128', 'United States'),
(9, 'Paula Parente', 'Female', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
(10, 'John Koskitalo', 'Male', 'Torikatu 38', 'Oulu', '90110', 'Finland'),
(39, 'Ann Devon', 'Female', '35 King George', 'London', 'WX3 6FW', 'United Kingdom'),
(38, 'Janine Labrune', 'Female', '67, rue des Cinquante Otages', 'Nantes', '44000', 'Finland'),
(37, 'Kathryn Segal', 'Female', 'Augsburger Strabe 40', 'Ludenscheid Gevelndorf', '58513', 'Germany'),
(36, 'Elizabeth Brown', 'Female', 'Berkeley Gardens 12 Brewery', 'London', 'WX1 6LT', 'United Kingdom'),
(30, 'Trina Davidson', 'Female', '1049 Lockhart Drive', 'Barrie', 'ON L4M 3B1', 'Canada'),
(31, 'Jeff Putnam', 'Male', 'Industrieweg 56', 'Bouvignies', '7803', 'Belgium'),
(32, 'Joyce Rosenberry', 'Female', 'Norra Esplanaden 56', 'HELSINKI', '380', 'Finland'),
(33, 'Ronald Bowne', 'Male', '2343 Shadowmar Drive', 'New Orleans', '70112', 'United States'),
(34, 'Justin Adams', 'Male', '45, rue de Lille', 'ARMENTIERES', '59280', 'France'),
(35, 'Pedro Afonso', 'Male', 'Av. dos Lusiadas, 23', 'Sao Paulo', '05432-043', 'Brazil'),
(100, 'Kathryn Segal', 'Female', 'Augsburger Strabe 40', 'Ludenscheid Gevelndorf', '58513', 'Germany'),
(101, 'Tonia Sayre', 'Female', '84 Haslemere Road', 'ECHT', 'AB32 2DY', 'United Kingdom'),
(102, 'Loretta Harris', 'Female', 'Avenida Boavista 71', 'SANTO AMARO', '4920-111', 'Portugal'),
(103, 'Sean Wong', 'Male', 'Rua Vito Bovino, 240', 'Sao Paulo-SP', '04677-002', 'Brazil'),
(104, 'Frederick Sears', 'Male', 'ul. Marysiuska 64', 'Warszawa', '04-617', 'Poland'),
(105, 'Tammy Cantrell', 'Female', 'Lukiokatu 34', 'HAMEENLINNA', '13250', 'Finland'),
(106, 'Megan Kennedy', 'Female', '1210 Post Farm Road', 'Norcross', '30071', 'United States'),
(107, 'Maria Whittaker', 'Female', 'Spresstrasse 62', 'Bielefeld Milse', '33729', 'Germany'),
(108, 'Dorothy Parker', 'Female', '32 Lairg Road', 'NEWCHURCH', 'HR5 5DR', 'United Kingdom'),
(109, 'Roger Rudolph', 'Male', 'Avenida Julio Saul Dias 78', 'PENAFIEL', '4560-470', 'Portugal'),
(110, 'Karen Metivier', 'Female', 'Rua Guimaraes Passos, 556', 'Sao Luis-MA', '65025-450', 'Brazil'),
(111, 'Charles Hoover', 'Male', 'Al. Tysiaclecia 98', 'Warszawa', '03-851', 'Poland'),
(112, 'Becky Moss', 'Female', 'Laivurinkatu 6', 'MIKKELI', '50120', 'Finland'),
(113, 'Frank Kidd', 'Male', '2491 Carson Street', 'Cincinnati', 'KY 45202', 'United States'),
(114, 'Donna Wilson', 'Female', 'Hallesches Ufer 69', 'Dettingen', '73265', 'Germany'),
(115, 'Lillian Roberson', 'Female', '36 Iolaire Road', 'NEW BARN', 'DA3 3FT', 'United Kingdom'),
(144, 'Stephen M. Menzies', 'Male', '577 Hartway Street', 'Bruie', '57325', 'United States'),
(143, 'Nikki G. Pascual', 'Female', '4291 Kinney Street', 'Agawam', '1001', 'United States'),
(141, 'Alpha A. Brookover', 'Female', '3542 Trainer Avenue', 'Kilbourne', '62655', 'United States'),
(142, 'Austin D. Salem', 'Male', '1184 Farland Street', 'Brockton', '2401', 'United States'),
(140, 'Bianca A. Carone', 'Female', '1777 Elkview Drive', 'Hialeah', '33012', 'United States'),
(139, 'Stephen M. Menzies', 'Male', '577 Hartway Street', 'Bruie', '57325', 'United States'),
(138, 'Nikki G. Pascual', 'Female', '4291 Kinney Street', 'Agawam', '1001', 'United States'),
(136, 'Alpha A. Brookover', 'Female', '3542 Trainer Avenue', 'Kilbourne', '62655', 'United States'),
(137, 'Austin D. Salem', 'Male', '1184 Farland Street', 'Brockton', '2401', 'United States'),
(145, 'Bianca A. Carone', 'Female', '1777 Elkview Drive', 'Hialeah', '33012', 'United States');

Now we want to make database connection in Laravel 9 framework. For this we have to open .env and in this file we have to define Mysql Database configuration.

.env
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=testing
DB_USERNAME=root
DB_PASSWORD=
Step 4: Create Model

Here we have use Model class for builder database query, so for this we have to create model class, so we have go to command prompt and write following command.

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;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */

    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,
        ]
    ];

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'CustomerName', 'Gender', 'Address', 'City', 'PostalCode', 'Country',
    ];
}
Step 5: Create Controller

For handle HTTP request we need to create controller in Laravel 9 application. For create controller here we have use compser command for this we have go to command prompt and run following command.

php artisan make:controller FullTextSearchController
app/http/controller/FullTextSearchController.php
<?php

namespace App\Http\Controllers;

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

class FullTextSearchController extends Controller
{   
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        return view('fullText.fullTextSearch');
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function action(Request $request)
    {
        if($request->ajax())
        {
            $data = FullTextSearch::search($request->get('full_text_search_query'))->get();

            return response()->json($data);
        }
    }
}
Step 6: Create Blade File

For display output in browser, we need to create blade file in resources/views folder. Here we have create full_text_search.blade.php file in this folder. In this file first we have to create on search box for search data and then after we have create one table. After this we have to write Ajax request, which will send ajax request to action() method of controller and it will received full text search data in json format and convert into HTML table and display on web page using jQuery. This Ajax request will be trigger when we have click on search button. Whole source code of this file you can get below.

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 - Mywebtuts.com</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 - Mywebtuts.com</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 7: Create Route

In Laravel 9 application, we need to set the route of all controller method, for this we have to open routes/web.php file and in this file we have define route which you can find below.

routes/web.php
<?php

use App\Https\Controller\FullTextSearchController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('full-text-search',[FullTextSearchController::class,'index']);

Route::post('full-text-search/action',[FullTextSearchController::class,'action'])->name('full-text-search.action');
Run Laravel App:

All steps have been done, now you have to type the given command and hit enter to run the laravel app:

php artisan serve

Now, you have to open web browser, type the given URL and view the app output:

http://localhost:8000/full-text-search
Share: