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="[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="[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



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


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 = [];
            $data = User::select("name", "id")
                        ->where('name', 'LIKE', '%'. $request->get('q'). '%')
        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.


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


<!DOCTYPE html>
    <title>Laravel 10 Select2 Autocomplete Search Using AJAX - Websolutionstuff</title>
    <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href=""/>
    <script src=""></script>
    <script src=""></script>
<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>
<script type="text/javascript">
    var path = "{{ route('autocompletesearch') }}";
        placeholder: 'Search Records',
        ajax: {
          url: path,
          dataType: 'json',
          delay: 250,
          processResults: function (data) {
            return {
              results:  $.map(data, function (item) {
                    return {
          cache: true




You might also like:

Recommended Post
Featured Post
How To Get Hourly Data In MySQL
How To Get Hourly Data In MySQ...

In this tutorial, we will see how to get hourly data in mysql. Many times we need to get hourly data or we are required...

Read More


How To Block IP Address In Laravel 10
How To Block IP Address In Lar...

In this article, we will see how to block IP addresses in laravel 10. Here we will learn about how to restrict...

Read More


How To Install Moment.js In Angular 15
How To Install Moment.js In An...

Welcome to this step-by-step guide on installing Moment.js in your Angular 15 project. As an Angular developer, I unders...

Read More


How To Bind Data In React JS
How To Bind Data In React JS

In this article, we will see how to bind data in React JS. Also, we will see how to bind the variable value in the...

Read More