In this tutorial, we will learn Laravel Autocomplete Search With Jquery UI Example

Step 1: 

Install Laravel 7 

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

Step 2: 

Setup Database 

DB_DATABASE=here your database name 
DB_USERNAME=here database username
DB_PASSWORD=here database password 

Step 3: 

Make Route routes/web.php


Step 4: 

Create Controller app/Http/Controllers/AutoComplateController.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();
         $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);

Step 5: 

Create View File resources/views/autocomplate.blade.php

<!DOCTYPE html>
    <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="">
    <link rel="stylesheet" href="" integrity="sha256-IdfIcUlaMBNtk4Hjt0Y6WMMZyMU0P9PN/pH+DFzKxbI=" crossorigin="anonymous" />

    <!-- Script -->
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>


    <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 -</h3>
            <div class="card-body" style="height: 210px;">
                <input type="text" id='employee_search' placeholder="--search--">

    <script type="text/javascript">

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

      $( "#employee_search" ).autocomplete({
        source: function( request, response ) {
          // Fetch data
            type: 'post',
            dataType: "json",
            data: {
               _token: CSRF_TOKEN,
               search: request.term
            success: function( data ) {
               response( data );
        select: function (event, ui) {
           return false;


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

php artisan serve

then run this url your browser:


May this example help you