Make autocomplete search using jquery ui in laravel 9; In this tutorial, you will learn how to implement textbox, input box search from database in laravel 9 app using jQuery Ui and ajax.
This Laravel 9 jQuery Ui Autocomplete Search database example tutorial will create a simple product search text box. After that, will implement jQuery UI and ajax code to search autocomplete or auto-fill data from database in laravel 9 app.
Laravel 9 Autocomplete Search using jQuery UI and Ajax From Database
Use the following steps and make autocomplete search using jquery ui in laravel 9:
- 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
First of all, execute 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
In this step, 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
In this step, execute 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
In this step, create two routes one for the show search box and second for autocompleting search data using jquery and ajax:
<?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
In this step, 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
In this step, Go 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- Tutsmake.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- Tutsmake.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, we have learned how to implement an autocomplete search in our laravel 9 application.
Recommended Laravel Tutorials
If you have any questions or thoughts to share, use the comment form below to reach us.
