Laravel Autocomplete Search With Jquery UI Example

Laravel 6 , Laravel , Jqury UI , Laravel 7

Nicesnippets

430

22-06-2020


Hi Guys,

In this Example,I will learn you how to use autocomplete search with jquery ui in laravel.you can easy and simply use autocomplete serach with jquery ui in laravel.

you can add to text search box then related text to get in your datatable.I show how you add jQuery UI autocomplete to the input field in the Laravel project.

Step 1: Install Laravel 7

In first step,you can install laravel application.So run bellow command and get clean fresh laravel 7 application.

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

Step 2: Setup Database

After successfully install laravel 6 Application, Go to your project .env file and set up database credential and move next step :

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name

DB_USERNAME=here database username

DB_PASSWORD=here database password

Step 3: Make Route

you can create to route in web.php file.

routes/web.php

Route::get('/autocomplete','AutoComplateController@index');

Route::post('/autocomplete/getAutocomplete/','AutoComplateController@getAutocomplete')->name('Autocomplte.getAutocomplte');

Step 4: Create Controller

you need to create a controller name AutoComplateController.this command use to your terminal.

app/Http/Controllers/AutoComplateController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\User;

class AutoComplateController extends Controller

{

public function index(){

return view('autocomplate');

}

public function getAutocomplete(Request $request){

$search = $request->search;

if($search == ''){

$autocomplate = User::orderby('name','asc')->select('id','name')->limit(5)->get();

}else{

$autocomplate = User::orderby('name','asc')->select('id','name')->where('name', 'like', '%' .$search . '%')->limit(5)->get();

}

$response = array();

foreach($autocomplate as $autocomplate){

$response[] = array("value"=>$autocomplate->id,"label"=>$autocomplate->name);

}

echo json_encode($response);

exit;

}

}

Step 5: Create View File

In this step you need to create blade view file.this blade use to layout to getdata reable formate.

resources/views/autocomplate.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel Autocomplete Search With Jquery UI Example</title>

<!-- Meta -->

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="utf-8">

<meta name="csrf-token" content="{{ csrf_token() }}">

<!-- CSS -->

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha256-IdfIcUlaMBNtk4Hjt0Y6WMMZyMU0P9PN/pH+DFzKxbI=" crossorigin="anonymous" />

<!-- Script -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>

<div class="container mt-3">

<div class="row">

<div class="col-md-10 offset-1 text-center">

<div class="card">

<div class="card-header bg-success text-white">

<h3>Laravel Autocomplete Search With Jquery UI Example - Nicesnippets.com</h3>

</div>

<div class="card-body" style="height: 210px;">

<input type="text" id='employee_search' placeholder="--search--">

</div>

</div>

</div>

</div>

</div>

<script type="text/javascript">

// CSRF Token

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

$(document).ready(function(){

$( "#employee_search" ).autocomplete({

source: function( request, response ) {

// Fetch data

$.ajax({

url:"{{route('Autocomplte.getAutocomplte')}}",

type: 'post',

dataType: "json",

data: {

_token: CSRF_TOKEN,

search: request.term

},

success: function( data ) {

response( data );

}

});

},

select: function (event, ui) {

$('#employee_search').val(ui.item.label);

$('#employeeid').val(ui.item.value);

return false;

}

});

});

</script>

</body>

</html>

you can run to laravel project in your teminal.bellow command.

php artisan serve

then run this url your browser:

http://localhost:8000/autocomplete

It will help you....


Recommended Posts