Skip to content

All topics  /  Laravel

Laravel Autocomplete Search With Jquery UI Example

Laravel ·

Teams applying “Laravel Autocomplete Search With Jquery UI Example” in a production project can use read the supporting guide to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Laravel Autocomplete Search With Jquery UI Example

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....

More on this topic