Laravel 7/6 Autocomplete Search with Jquery UI

Laravel 7/6 Autocomplete Search with Jquery UI

How to implement jquery ui autocomplete search with Database in laravel 6 with example. In this laravel tutorial, We will share with you how to implement autocomplete search with database using jquery ui example.

Today we will implement jquery ui autocomplete search simple and easy way. Just follow the few steps and implement autocomplete search in your laravel Application

Autocomplete Search Jquery Ui

  • Install Laravel App
  • Setup Database
  • Generate Fake Records
  • Make Routes
  • Create Controller & Methods
  • Create Blade View
  • Conclusion

1: Install Laravel App

First of we need to download laravel fresh setup. Use the below command and download fresh new laravel setup :

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

2: Setup Database

After successfully install laravel 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 here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

3: Generate Fake Records

Before we add fake records in database first migrate the table in database using the below command :

php artisan migrate

We need to add fake records in our database. use the below command and add 100 fake records in database :

php artisan migrate

php artisan tinker

factory(App\User::class, 100)->create();

4: Make Routes

Now we will create two routes one for show search input box and second for autocomplete search using jquery ui autocomplete.

 Route::get('search', 'AutoCompleteController@index');
Route::get('autocomplete', 'AutoCompleteController@search');

5: Create Controller

We need to create a controller name AutoCompleteController. Use the below command and create Controller :

php artisan make:controller AutoCompleteController

After successfully create controller go to app/controllers/AutoCompleteController.php and put the below code :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

class AutoCompleteController extends Controller
{

    public function index()
    {
        return view('search');
    }

    public function search(Request $request)
    {
          $search = $request->get('term');
     
          $result = User::where('name', 'LIKE', '%'. $search. '%')->get();

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

6: Create Blade view

In this step we need to create blade view file. Go to app/resources/views and create one file name search.blade.php .

After create blade file put the below html code here with jquery ui and css library file :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Auto Complete Search Using Jquery UI - Tutsmake.com</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <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>
 <style>
    .container{
    padding: 10%;
    text-align: center;
   } 
 </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-12"><h2>laravel 6 Auto Complete Search Using Jquery UI</h2></div>
        <div class="col-12">
            <div id="custom-search-input">
                <div class="input-group">
                    <input id="search" name="search" type="text" class="form-control" placeholder="Search" />
                </div>
            </div>
        </div>
    </div>
</div>
<script>
 $(document).ready(function() {
    $( "#search" ).autocomplete({

        source: function(request, response) {
            $.ajax({
            url: "{{url('autocomplete')}}",
            data: {
                    term : request.term
             },
            dataType: "json",
            success: function(data){
               var resp = $.map(data,function(obj){
                    //console.log(obj.city_name);
                    return obj.name;
               }); 

               response(resp);
            }
        });
    },
    minLength: 1
 });
});

</script>   
</body>
</html>

We have put some script code in search.blade.php file. The script code will work to search a data from database and return data to our view file this ajax method full field over jquery autocomplete search example.

7: Start Development Server

We need to start development server. Use the php artisan serve command and start your server :

 php artisan serve

If you want to run the project diffrent port so use this below command

php artisan serve --port=8080

Now we are ready to run our example so run bellow command to quick run.

 http://localhost:8000/search

Conclusion

In this tutorial , We have successfully implemented auto complete search in our laravel 6 application. our examples run quickly.

Recommended Laravel Tutorial

  1. Laravel Tutorial From Scratch | Step By Step
  2. Laravel 6 Ajax CRUD(DataTables Js) Tutorial Example
  3. Laravel 6 – Ajax CRUD (Operation) Application Example
  4. Laravel 6 Angular JS CRUD Example Tutorial
  5. Upload Files/Images to Amazon s3 Cloud Using Laravel 6 Filesystem
  6. Laravel 6 CKEditor with Image Upload
  7. Ajax Image Upload In Laravel Tutorial Example From Scratch
  8. Laravel 6 Intervention Upload Image Using Ajax – Example
  9. Laravel Upload Image to Database with Validation
  10. Send Email Example Laravel
  11. Generate OR Create PDF In Laravel 6 Example
  12. Simple Generator or Create Qr Code Example Laravel
  13. Laravel Custom Cron Schedule Example Tutorial
  14. Github Login in Laravel 6 Example
  15. Laravel: Query Scope Example Tutorial

If you have any questions or thoughts to share, use the comment form below to reach us.

AuthorTuts Make

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Codeigniter, Vue JS, Angular JS, React Js, WordPress and Bootstrap from a starting stage.

One reply to Laravel 7/6 Autocomplete Search with Jquery UI

  1. Tks , very good 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *