How to Make Live Autocomplete Search with Livewire in Laravel

With the use of autocomplete textbox user can search and pick an item from the suggestion list.

Suggestion list is dynamically updated according to the input.

In this tutorial, I show how you can make autocomplete search with livewire in Laravel.

Contents

1. Install Livewire
2. Add Database configuration
3. Create a Table
4. Create Model
5. Create Controller
6. Create Route
7. Create Livewire Component
8. Create View
9. Output
10. Conclusion

1. Install Livewire

You can skip this step if Livewire is already installed in your project.

Run following command to install Livewire –

composer require livewire/livewire

---

2. Add Database configuration

Open .env file to update the database connection.

Specify the host, database name, username, and password.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tutorial
DB_USERNAME=root
DB_PASSWORD=

---

3. Create a Table

• Create a table employees using migration.

php artisan make:migration create_employees_table

• Now, navigate to database/migrations/ folder from the project root.
• Find a PHP file that ends with create_employees_table and open it.
• Define the table structure in the up() method.

public function up() {    Schema::create('employees', function (Blueprint $table) {       $table->id();       $table->string('name',60);       $table->string('email',80);       $table->string('city',100);       $table->timestamps();    }); }

• Run the migration –

php artisan migrate

• The table is been created and I added some records to it.

---

4. Create Model

• Create Employees Model –

php artisan make:model Employees

• Open app/Models/Employees.php file.
• Specify mass assignable Model attributes – name, email, and city using the $fillable property.

Completed Code

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Employees extends Model
{
    use HasFactory;
    protected $fillable = [ 
        'name','email','city'
    ];
}

---

5. Create Controller

Create EmployeesController controller.

php artisan make:controller EmployeesController

Create 1 method –

• index() – Load index view.

Completed Code

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class EmployeesController extends Controller {    public function index(){        return view('index');    } }

---

6. Create Route

• Open routes/web.php file.
• Define 1 route –
  • / – Load index view.

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\EmployeesController;

Route::get('/', [EmployeesController::class, 'index']);

---

7. Create Livewire Component

Create fetchemployees component –

php artisan make:livewire searchbox

This will create 2 files –

• app/Http/Livewire/Searchbox.php
• resources/views/liverwire/searchbox.blade.php

---

Searchbox.php

• Open app/Http/Livewire/Searchbox.php file.
• Create 4 property variables –
  • $showresult – Using this toggle the suggestion list container.
  • $search – For data binding.
  • $records – Store fetched records.
  • $empDetails – Store clicked employee data.
• Create 2 methods –
  • searchResult() – This method calls when type characters in the textbox. If $this->search is not empty then fetch 5 records from the employees table where $this->search matches are in the name field.

Assign fetched records to $this->records and assign true to $this->showresult.

If $this->search is empty then assign false to $this->showresult.

• fetchEmployeeDetail() – This method calls when select an item from the search result. Select a record by id from the employees table and assign to $this->records. Update $this->search value with employee name. Assign false to $this->showresult.

Completed Code

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Employees;

class Searchbox extends Component
{
     public $showdiv = false;
     public $search = "";
     public $records;
     public $empDetails;

     // Fetch records
     public function searchResult(){

         if(!empty($this->search)){

             $this->records = Employees::orderby('name','asc')
                       ->select('*')
                       ->where('name','like','%'.$this->search.'%')
                       ->limit(5)
                       ->get();

             $this->showdiv = true;
         }else{
             $this->showdiv = false;
         }
     }

     // Fetch record by ID
     public function fetchEmployeeDetail($id = 0){

         $record = Employees::select('*')
                     ->where('id',$id)
                     ->first();

         $this->search = $record->name;
         $this->empDetails = $record;
         $this->showdiv = false;
     }

     public function render(){ 
         return view('livewire.searchbox');
     }
}

---

searchbox.blade.php

• Open resources/views/liverwire/searchbox.blade.php file.
• Create a text element for searching. Add wire:model='search' and wire:keyup event that calls searchResult.
• If $showresult is true then show search result in <ul>. Loop on $records to create <li >. Add wire:click event that fetchEmployeeDetail({{ $record->id }}). Pass employee id as a parameter.
• Display selected employee information in <div > is $empDetails if not empty.

Completed Code

<div>
    <!-- CSS -->
    <style type="text/css">
    .search-box .clear{
        clear:both;
        margin-top: 20px;
    }

    .search-box ul{
        list-style: none;
        padding: 0px;
        width: 250px;
        position: absolute;
        margin: 0;
        background: white;
    }

    .search-box ul li{
        background: lavender;
        padding: 4px;
        margin-bottom: 1px;
    }

    .search-box ul li:nth-child(even){
        background: cadetblue;
        color: white;
    }

    .search-box ul li:hover{
        cursor: pointer;
    }

    .search-box input[type=text]{
        padding: 5px;
        width: 250px;
        letter-spacing: 1px;
    }
    </style>

    <div class="search-box">
        <input type='text' wire:model="search" wire:keyup="searchResult">

        <!-- Search result list -->
        @if($showresult)
            <ul >
                @if(!empty($records))
                    @foreach($records as $record)

                         <li wire:click="fetchEmployeeDetail({{ $record->id }})">{{ $record->name}}</li>

                    @endforeach
                @endif
            </ul>
        @endif

        <div class="clear"></div>
        <div >
            @if(!empty($empDetails))
                <div>
                     Name : {{ $empDetails->name }} <br>
                     Email : {{ $empDetails->email }}
                </div>
            @endif
        </div>
    </div>

</div>

---

8. Create View

Create index.blade.php file in views/resources/ folder.

Include searchbox component and @livewireScripts.

Completed Code

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Make Live Autocomplete Search with Livewire in Laravel</title>

   @livewireStyles
</head>
<body>

   <livewire:searchbox />

   @livewireScripts
</body>
</html>

---

9. Output

View Output

---

10. Conclusion

In the example, I created a custom component to add search box with a suggestion list. Data load while typing.

Customize the design and functionality according to your requirement while implementing this on your project.

If you found this tutorial helpful then don't forget to share.

Original article source at: https://makitweb.com/

#laravel #livewire 

What is GEEK

Buddha Community

Laravel 7 Full Text Search MySQL

Here, I will show you how to create full text search in laravel app. You just follow the below easy steps and create full text search with mysql db in laravel.

Laravel 7 Full Text Search Mysql

Let’s start laravel full-text search implementation in laravel 7, 6 versions:

1. Step 1: Install Laravel New App
2. Step 2: Configuration DB .evn file
3. Step 3: Run Migration
4. Step 4: Install Full Text Search Package
5. Step 5: Add Fake Records in DB
6. Step 6: Add Routes,
7. Step 7: Create Controller
8. Step 8: Create Blade View
9. Step 9: Start Development Server

https://www.tutsmake.com/laravel-full-text-search-tutorial/

#laravel full text search mysql #laravel full text search query #mysql full text search in laravel #full text search in laravel 6 #full text search in laravel 7 #using full text search in laravel

Laravel 8 Livewire Form Wizard Tutorial Example

Laravel 8 livewire form wizard example. In tutorial i will show you how to implement multi step form or form wizard using livewire package in laravel 8 app from scratch.

Laravel 8 Livewire Wizard Form Example Tutorial

Follow the below given steps and easy implement multi step form or form wizard in laravel 8 app with livewire:

• Step 1: Install Laravel 8 App
• Step 2: Connecting App to Database
• Step 3: Create Model & Migration For File using Artisan
• Step 4: Install Livewire Package
• Step 5: Create Form Wizard Components using Artisan
• Step 6: Add Route For Livewire Form Wizard
• Step 7: Create View File
• Step 8: Run Development Server

https://www.tutsmake.com/laravel-8-livewire-form-wizard-tutorial/

#laravel multi step form wizard #laravel 8 livewire multi step form wizard #livewire multi step form bootstrap laravel #laravel multi step form wizard with livewire #laravel livewire multi step form example #laravel livewire wizard form example

Php how to delete multiple rows through checkbox using ajax in laravel

First thing, we will need a table and i am creating products table for this example. So run the following query to create table.

CREATE TABLE `products` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
 `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
 `updated_at` datetime DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

Next, we will need to insert some dummy records in this table that will be deleted.

INSERT INTO `products` (`name`, `description`) VALUES

('Test product 1', 'Product description example1'),

('Test product 2', 'Product description example2'),

('Test product 3', 'Product description example3'),

('Test product 4', 'Product description example4'),

('Test product 5', 'Product description example5');

Now we are redy to create a model corresponding to this products table. Here we will create Product model. So let’s create a model file Product.php file under app directory and put the code below.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'name','description'
    ];
}

Step 2: Create Route

Now, in this second step we will create some routes to handle the request for this example. So opeen routes/web.php file and copy the routes as given below.

routes/web.php

Route::get('product', 'ProductController@index');
Route::delete('product/{id}', ['as'=>'product.destroy','uses'=>'ProductController@destroy']);
Route::delete('delete-multiple-product', ['as'=>'product.multiple-delete','uses'=>'ProductController@deleteMultiple']);

#laravel #delete multiple rows in laravel using ajax #laravel ajax delete #laravel ajax multiple checkbox delete #laravel delete multiple rows #laravel delete records using ajax #laravel multiple checkbox delete rows #laravel multiple delete

Codeigniter 4 Autocomplete Textbox From Database using Typeahead JS - Tuts Make

Autocomplete textbox search from database in codeigniter 4 using jQuery Typeahead js. In this tutorial, you will learn how to implement an autocomplete search or textbox search with database using jquery typehead js example.

This tutorial will show you step by step how to implement autocomplete search from database in codeigniter 4 app using typeahead js.

Autocomplete Textbox Search using jQuery typeahead Js From Database in Codeigniter

• Download Codeigniter Latest
• Basic Configurations
• Create Table in Database
• Setup Database Credentials
• Create Controller
• Create View
• Create Route
• Start Development Server

https://www.tutsmake.com/codeigniter-4-autocomplete-textbox-from-database-using-typeahead-js/

#codeigniter 4 ajax autocomplete search #codeigniter 4 ajax autocomplete search from database #autocomplete textbox in jquery example using database in codeigniter #search data from database in codeigniter 4 using ajax #how to search and display data from database in codeigniter 4 using ajax #autocomplete in codeigniter 4 using typeahead js

Laravel Autocomplete Search With Jquery UI Example

Hi Guys,

In this Example,I will learn you how to use autocomplete search with jquery ui in laravel.you can easy and simply use autocomplete serach with jquery ui in laravel.

you can add to text search box then related text to get in your datatable.I show how you add jQuery UI autocomplete to the input field in the Laravel project.

Link :- https://www.nicesnippets.com/blog/laravel-autocomplete-search-with-jquery-ui-example

#laravel #laravel tutorial #laravel tutorial for beginner #learn laravel #learn laravel for free