Laravel 10 Select2 Autocomplete Search Using Ajax

Websolutionstuff | Apr-10-2023 | Categories : Laravel PHP jQuery MySQL

In this article, we will see laravel 10 select2 autocomplete search using ajax. Here, we will learn about select2 autocomplete search using ajax in laravel 10. You can search records from the database without page refresh or without form submission. Also, you can customize your search as per your requirements.

So, let's see how to autocomplete search using ajax in select2, select2 ajax laravel 10, select2 autocomplete ajax, and how to use select2 in laravel 10.

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. In order to use Select2, you must include the compiled JavaScript and CSS files on your website.

Using Select2 from a CDN:

A CDN (content delivery network) is the fastest way to get up and running with Select2. Select2 is hosted on both the jsDelivr and cdnjs CDNs. Simply include the following lines of code in the <head> section of your page.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

 

Step 1: Install Laravel 10

In this step, we will install laravel 10 using the following command. So, run the below code to the terminal.

composer create-project laravel/laravel laravel_10_select2_search_example

 

Step 2: Add Dummy Users

Then we will run default migration using the following command. So, run the below code to the terminal.

php artisan migrate

After that, we will create dummy records using the tinker.

php artisan tinker
  
User::factory()->count(50)->create();

 

 

Step 3: Create Controller

Now, we will create UserController using the following command. And add the two methods. So, add the following code to that file.

php artisan make:controller UserController

app/Http/Controllers/UserController.php

<?php
    
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
    
class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(): View
    {
        return view('index');
    }
      
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function autoCompleteSearch(Request $request): JsonResponse
    {
        $data = [];
    
        if($request->filled('q')){
            $data = User::select("name", "id")
                        ->where('name', 'LIKE', '%'. $request->get('q'). '%')
                        ->get();
        }
     
        return response()->json($data);
    }
}
 
Step 4: Create Routes

Then we will create routes to the web.php file. So, add the following code to that file.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\UserController;
  
/* 
|--------------------------------------------------------------------------
| 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::controller(UserController::class)->group(function(){
    Route::get('index', 'index');
    Route::get('auto-complete-search', 'autoCompleteSearch')->name('autocompletesearch');
});

 

Step 5: Create View File

Now, we will create an index.blade.php file. So, add the following HTML to that file.

resources/views/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 Select2 Autocomplete Search Using AJAX - Websolutionstuff</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</head>
<body>
     
<div class="container">
    <h4 class="mt-5 mb-4">Laravel 10 Select2 Autocomplete Search Using AJAX - Websolutionstuff</h4>   
    <select class="form-control" id="search" style="width:780px;" name="user_id"></select>
</div>
     
<script type="text/javascript">
    var path = "{{ route('autocompletesearch') }}";
  
    $('#search').select2({
        placeholder: 'Search Records',
        ajax: {
          url: path,
          dataType: 'json',
          delay: 250,
          processResults: function (data) {
            return {
              results:  $.map(data, function (item) {
                    return {
                        text: item.name,
                        id: item.id
                    }
                })
            };
          },
          cache: true
        }
      });
  
</script>
     
</body>
</html>

Output: 

laravel_10_select2_autocomplete_search_using_ajax_output

 


You might also like:

Recommended Post
Featured Post
How To Get Element By Data Attribute In jQuery
How To Get Element By Data Att...

In this article, we'll learn how to locate elements using data-attribute values. We can do this using jQuery and CSS...

Read More

Jul-11-2022

Laravel 9 Barcode Generator Example
Laravel 9 Barcode Generator Ex...

In this article, we will see laravel 9 barcode generator example. In this example we will use the milon/barcod...

Read More

Mar-26-2022

Laravel 9 Cron Job Task Scheduling Tutorial
Laravel 9 Cron Job Task Schedu...

In this article, we will see laravel 9 cron job task scheduling tutorial, many times we require to run some piece o...

Read More

Mar-17-2022

How To Change Table Name Using Laravel 10 Migration
How To Change Table Name Using...

In this article, we will see how to change the table name using laravel 10 migration. Here, we will learn about the...

Read More

Apr-28-2023