Laravel 8 Autocomplete Search from Database Tutorial

Laravel 8 Autocomplete Search from Database Tutorial

Laravel 8 autocomplete textbox search using jQuery ajax. In this tutorial, you will learn how to implement textbox search from database in laravel 8 app using jQuery ajax.

In this tutorial, we will create simple product search text box. After that, will implement jQuery and ajax code to search autocomplete or auto-fill data from database in laravel 8 app.

Laravel 8 Autocomplete Textbox Search Tutorial

  • Step 1 – Install Laravel 8 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 8 App

First of all, execute the following command on command prompt to install/download laravel 8 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 8 app to database. So open .env file and add the database detail like 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 command prompt to create 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 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 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 8 Autocomplete Textbox From Database with jQuery Ajax - 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 8 Autocomplete Textbox From Database using jQuery ajax - 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 command prompt to start your server :

 php artisan serve

Then open browser and fire the below url on it:

 http://localhost:8000/search

Conclusion

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

If you have any questions or thoughts to share, use the comment form below to reach us.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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