Full Text Search With Ajax In Laravel 6 Tutorial

This is another release in Laravel 6. In this release, you will learn how to implement Laravel 6 full-text search using Ajax with the Laravel search package. Would you like to learn the full text search in your Laravel 6 application? In this case, this publication will help you learn this topic. Here in this publication we have presented a tutorial for creating a full text search with the package "nicolaslopezj / searchable" with Ajax under Laravel 6. Therefore, the user can retrieve search data on the website without updating the website, since we have used Ajax in the context of Laravel 6.

You need to know what full text search is. The full-text search is therefore a type of search method in which data is searched for in every request word in your database. Most search engines have used full-text search to find data in every search term and search result on the website. Browsing data in the database is more advanced.





We all know that data search is required on almost all dynamic websites that deal with the database. Therefore, the search function is required for every web-based application. However, if this search box has a full-text search function, viewers will see more meaningful search results based on their search query. If you've used Datatable, all words will be searched as a single word, while full-text searches will search and compete for each word to search for data in the database. So here we learned how to implement full text search in the context of Laravel 6 with Ajax with the composer package "nicolaslopezj / searchable".

• Download the Laravel 6 framework
• Download and install the search package
• Establish database connection
• Create a model
• Create controller
• Create a blade file view
• Set the path for the driver method
• Run the Laravel 6 application

Download Laravel 6 framework

To build a Laravel 6 application, you must first download and install the Laravel 6 framework. In this step of the Laravel 6 tutorial, you need to change to the command prompt and the directory where you want to load and install the Laravel framework 6. We have to write and execute the following command.

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

This command downloads the Laravel 6 framework and installs it in the define directory.

Download and Install Searchable Package

In this Laravel 6 tutorial, we have to do a full-text search in the Laravel 6 application, for which we used the "nicolaslopezj / searchable" package. To do this, we have to go to the command prompt and run the following command. This command downloads this search package and installs it in the Laravel 6 application.

composer require nicolaslopezj/searchable

Make Database Connection

Before the connection to the MySQL database can be established, a table must first be created in the database. To do this, you need to run the 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');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `full_text_searches`
--
ALTER TABLE `full_text_searches`
  ADD PRIMARY KEY (`CustomerID`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `full_text_searches`
--
ALTER TABLE `full_text_searches`
  MODIFY `CustomerID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=146;

Now we want to create a database connection in the context of Laravel 6. To do this, we have to open .env and define the configuration of the MySQL database in this file.


.env

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

If you have carried out a full text search you will get the error SQL 1055. To avoid this error, we have to open the file config / database.php and change 'strict' => true to 'strict' in this file. => false. By changing this setting, you can avoid SQL error 1055.

<?php

----

 'mysql' => [
            'driver' => 'mysql',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => false,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],

-----

?>

Create Model

Here we used the Model class to query the generator database. To do this, we need to create the Model class, so we have to go to the command prompt and enter the following command.

php artisan make:model Full_text_search --migration

This command creates the model class in the app / Full_text_search.php folder. In this file we need to add SearchableTrait to the search package. Then we have to define the name of the table column in which we want to do the full text search, which you can see below.

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

Create Controller

To process the HTTP request, we need to create a controller in the Laravel 6 application. To create a controller here, we need to use the compser command and go to the command prompt and run the following command.

php artisan make:controller Full_text_search_Controller

This command creates a driver file called Full_text_search_Controller.php in the app / Http / Controllers folder. In this class, we first need to add a model class by adding code, e.g. B. with App \ Full_text_search; In this controller we have to do the following method.

index (): This is the root method of this controller. This method has a simple load file full_text_search.blade.php in the browser.

action (Request $ request): This method receives the Ajax request for full-text search data in the mysql database. First, this method has the verification that the incoming request is Ajax or not. If it is an Ajax request, only the rest of the code is executed. If this request is Ajax, it will be executed if it is blocked. When using the full-text search model with the search package, perform a full-text search based on the search query. After you receive the data, send it back to the Ajax request in json format.

app/Http/Controllers/Full_text_search_Controller.php

<?php

namespace App\Http\Controllers;

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

class Full_text_search_Controller extends Controller
{
    function index()
    {
     return view('full_text_search');
    }

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

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

    function normal_search(Request $request)
    {
        if($request->ajax())
        {
            $data = Full_text_search::latest()->get();
            return Datatables::of($data)->make(true);
        }
      
        return view('normal_search');
    }
}

Create View Blade File

To view the output in the browser, you need to create a blade file in the resources / views folder. Here we have created the file full_text_search.blade.php in this folder. In this file we first have to create the search data in the search field and then create a table. Then we have to write the Ajax request, which sends the Ajax request to the controller's action () method and receives full-text search data in json format. These are displayed in an HTML table and with jQuery on the website. This Ajax request is activated when we click the search button. The full source code of this file can be found below.

resources/views/full_text_search.blade.php

<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Full Text Search With Ajax In Laravel 6 Tutorial</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 With Ajax In Laravel 6 Tutorial</h3>
     <br />
     <div class="row">
      <div class="col-md-10">
       <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-striped">
        <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>

resources / views / normal_search.blade.php // This file should only understand how simple search works and how full-text search works.

<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Normal Search</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://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.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">Normal Search in Datatables</h3>
     <br />
   <div class="table-responsive">
    <table class="table table-bordered table-striped" id="user_table">
           <thead>
            <tr>
                <th>Customer Name</th>
                    <th>Gender</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>Postal Code</th>
                    <th>Country</th>
            </tr>
           </thead>
       </table>
   </div>
   <br />
   <br />
  </div>
 </body>
</html>


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

 $('#user_table').DataTable({
  processing: true,
  serverSide: true,
  ajax:{
   url: "{{ route('full-text-search.normal-search') }}",
  },
  columns:[
   {
    data: 'CustomerName',
    name: 'CustomerName'
   },
   {
    data: 'Gender',
    name: 'Gender'
   },
   {
        data: 'Address',
        name: 'Address'
      },
      {
        data: 'City',
        name: 'City'
      },
      {
        data: 'PostalCode',
        name: 'PostalCode'
      },
      {
        data: 'Country',
        name: 'Country'
      }
  ]
 });

});
</script>

Set Controller Method Route

In the Laravel 6 application we have to set the route of all controller methods. For this we have to open the routes / web.php file and in this file we have the defined route, which you can find below.

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

After all the code is done, we finally need to start the Laravel 6 framework server. To do this, we have to go to the command prompt and enter the following command.

php artisan serve

This command starts the server and gives you the base URL of your application. For the previous test code, enter the following URL in your browser.

http://127.0.0.1:8000/full-text-search

So this is our complete Laravel 6 tutorial, where you will learn step by step how to use Ajax to create a full text search application with the "nicolaslopezj / searchable" package.