Hi Men,
In this blog,I'm able to examine you how to use complete text search using ajax in laravel.you could easy and surely use complete textual content search using ajax in laravel.
This is one greater put up on Laravel 8 and on this post you may discover a way to put into effect complete text search in Laravel eight framework through the use of Ajax with Searchable Laravel package. if you desired to discover ways to make full text seek in you Laravel 8 software? If sure, then this put up will help you may gaining knowledge of this subject matter.
Here in this submit we've got percentage academic on a way to create complete textual content search with the aid of using "nicolaslopezj/searchable" package with Ajax in Laravel eight framework. So, consumer can get searchable facts on internet page without refresh of net page, due to the fact here we have use Ajax in Laravel eight framework.
You need to realize what's complete textual content search. So, complete textual content seek is a one type of seek method, which seek data on each word of request to your database. most of engines like google has been used complete text search technique for search records on each word of seek request and seek result on internet web page. it is more advance level for search a information in database.
Download Laravel 8 framework
For make any Laravel 8 application, first we need to download and install Laravel 8 framework. So, in this step of Laravel 8 tutorial, we have to go command prompt and go directory in which we want to download load and install Laravel 8 framework. We have to write and run following command.
composer create-project --prefer-dist laravel/laravel laravel-8
Download and Install Searchable Package
In this Laravel 8 tutorial, We need to make Full text search feature in Laravel 8 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 8 application.
composer require nicolaslopezj/searchable
Make 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 6 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=
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/Models/Full_text_search.php
<?php
namespace App\Models;
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;
/**
* Write code on searchable
*
*
*/
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,
]
];
/**
* Write code on fillable
*
*
*/
protected $fillable = [
'CustomerName', 'Gender', 'Address', 'City', 'PostalCode', 'Country',
];
}
Set Controller Method Route
In Laravel 8 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
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Full_text_search_Controller;
/*
|--------------------------------------------------------------------------
| 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', [Full_text_search_Controller::class,'index']);
Route::post('full-text-search/action', [Full_text_search_Controller::class,'action'])->name('full-text-search.action');
?>
Create Controller
For handle HTTP request we need to create controller in Laravel 6 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 Full_text_search_Controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\FullTextSearch;
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);
}
}
}
Create View 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</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>
Run Laravel 8 Application
After all code is ready, lastly we need to start Laravel 6 framework server. For this we have to go command prompt and write following command.
php artisan serve
This command will start server and give you base url of your application. For test above code you have write following url in your browser.
localhost:8000/full-text-search
It will help you...
