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 Increase Session Lifetime In Laravel
How To Increase Session Lifeti...

In this article, we will see how to increase session timeout in laravel. In this example, we can see how to se...

Read More

Jun-28-2020

How to Use an Image as a Link in React
How to Use an Image as a Link...

In the ever-evolving realm of web development, I've come to realize the significance of interactivity in shaping rem...

Read More

Aug-16-2023

Laravel 11 CKEditor Image Upload Example
Laravel 11 CKEditor Image Uplo...

Hello, laravel web developers! In this article, we'll see how to image upload in CKeditor 5 in laravel 11....

Read More

May-20-2024

How To Validate Password And Confirm Password Using JQuery
How To Validate Password And C...

In this article, we'll explore a simple way to validate passwords and confirm passwords using jQuery. Password valid...

Read More

Sep-02-2020