Laravel 9 Autocomplete Search using jQuery UI and Ajax From Database

Laravel 9 autocomplete search from database using jQuery UI; Through this tutorial, i am going to show you how to create autocomplete search from database in laravel 9 app using jQuery Ui and ajax.

Autocomplete Search using jQuery UI in Laravel 9

Use the below given steps to implement autocomplete search using jQuery UI and ajax from the database in laravel 9 apps:

  • Step 1 – Install Laravel 9 App
  • Step 2 – Database Configuration Database
  • Step 3 – Make Model and Migration
  • Step 4 – Make Routes
  • Step 5 – Create Controller
  • Step 6 – Create Blade View
  • Step 7 – Implement jQuery Ajax Code
  • Step 8 – Run Development Server

Step 1 – Install Laravel 9 App

Run the following command on the command prompt to install/download laravel 9 fresh setup in your system or server:

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

Step 2 – Database Configuration Database

To connect to laravel 9 app to the database. So open .env file and add the database detail like the following:

 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

Step 3 – Make Model and Migration

Run the following command on the command prompt to create a product model and migration file:

php artisan make:model Product -m

Then open product.php file and add the following code into it, which is placed on app/model directory:

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Product extends Model
{
    use HasFactory;
  
    protected $fillable = [
        'name'
    ];
}

After that, open create_products_tables.php and add the following code into it, which is placed on database/migration directory:

<?php
  
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
  
class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

Step 4 – Make Model and Migration

To create 2 routes one to display autocomplete search box and second for autocompleting search data using jquery and ajax; as follows:

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\AutoCompleteController;
  
/*
|--------------------------------------------------------------------------
| 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('search', [AutoCompleteController::class, 'index'])->name('search');
Route::get('autocomplete', [AutoCompleteController::class, 'autocomplete'])->name('autocomplete');

Step 5 – Create Controller

To create a controller name AutoCompleteController by executing the following command on the command prompt:

php artisan make:controller AutoCompleteController

Then open AutoCompleteController.php and add the following code into this file, which is placed on app/http/controllers directory:

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\Product;
  
class AutoCompleteController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('autocomplete-search');
    }
  
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function autocomplete(Request $request)
    {
        $res = Product::select("name")
                ->where("name","LIKE","%{$request->term}%")
                ->get();
   
        return response()->json($res);
    }
}

Step 6 – Create Blade View

Visit to the resources/views directory and create blade view file name autocomplete-search.blade.php.

Then add the following code into autocomplete-search.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Autocomplete Textbox From Database with jQuery ui- Laratutorials.com</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
  <script type="text/javascript">
     var siteUrl = "{{url('/')}}";
  </script>
</head>
<body>
<div class="container mt-4">
  <div class="card">
    <div class="card-header text-center font-weight-bold">
      <h2>Laravel 9 Autocomplete Textbox From Database using jQuery ui- Laratutorials.com</h2>
    </div>
    <div class="card-body">
      <form name="autocomplete-textbox" id="autocomplete-textbox" method="post" action="#">
       @csrf
        <div class="form-group">
          <label for="exampleInputEmail1">Search Product By Name</label>
          <input type="text" id="name" name="name" class="form-control">
        </div>
      </form>
    </div>
  </div>
  
</div>  
  <script src="{{ asset('auto.js') }}"></script>
</body>
</html>

Step 7 – Implement jQuery Ajax Code

In this step, Navigate public directory and create one file name auto.js.

Then add the following code in auto.js file:

 $(document).ready(function() {
    $( "#name" ).autocomplete({
 
        source: function(request, response) {
            $.ajax({
            url: siteUrl + '/' +"autocomplete",
            data: {
                    term : request.term
             },
            dataType: "json",
            success: function(data){
               var resp = $.map(data,function(obj){
                    return obj.name;
               }); 
 
               response(resp);
            }
        });
    },
    minLength: 2
 });
});
 

Step 8 – Run Development Server

Now, execute the PHP artisan serve command on the command prompt to start your server :

 php artisan serve

Then open the browser and fire the below URL on it:

 http://localhost:8000/search

Conclusion

Laravel 9 autocomplete search from database example tutorial, you have learned how to implement an autocomplete search in our laravel 9 application.

Recommended Laravel Tutorials

Be First to Comment

Leave a Reply

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