jQuery Ajax Autocomplete Search From Database in Laravel 7

Ajax jQuery Laravel php Programming Technology

Today, We want to share with you jQuery Ajax Autocomplete Search From Database in Laravel 7.In this post we will show you Manual Laravel Autocomplete search from Database, hear for Ajax Autocomplete Textbox in Laravel 7 using JQuery we will give you demo and example for implement.In this post, we will learn about Make Autocomplete search using jQuery UI in Laravel 7 with an example.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

jQuery Ajax Autocomplete Search From Database in Laravel 7

There are the Following The simple About Autocomplete Search with Laravel, jQuery and Ajax Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel 7 Jquery UI Autocomplete Search Example, so the autocomplete textbox in jquery laravel is used for this example is following below.

Phase 1 : Download Laravel 7

get fresh Laravel 7 version Web application

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

Phase 2: Make Migration and Model

create migration for items table using Laravel 7

php artisan make:migration create_items_table

“database/migrations”

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

run migration:

php artisan migrate

app/Item.php

<?php
  
namespace App;
   
use Illuminate\Database\Eloquent\Model;
  
class Item extends Model
{
       
}

Phase 3: Define a Laravel Route

routes/web.php

Route::get('search', '[email protected]')->name('search');
Route::get('autocomplete', '[email protected]')->name('autocomplete');

Phase 4: Make Controller

app/Http/Controllers/FindController.php

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

Phase 5: Make View File

resources/views/search.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 7 Autocomplete Search using Bootstrap Typeahead JS - Pakainfo.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
</head>
<body>
   
<div class="container">
    <h1>Laravel 7 Autocomplete Search using Bootstrap Typeahead JS - Pakainfo.com</h1>   
    <input class="typeahead dsp form-control frm-custom-model" type="text">
</div>
   
<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get(path, { query: query }, function (data) {
                return process(data);
            });
        }
    });
</script>
   
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about laravel 7autocomplete.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   jquery Pass PHP Laravel 5.6 Variables to Javascript
  2.   Send HTML Form Data as JSON via Ajax
  3.   PHP Laravel Autocomplete search from Database Example
  4.   jQuery AJAX Multiple Files Upload using PHP
  5.   Laravel Eloquent Search Filter Example
  6.   PHP Delete All Directory Files In Directory
  7.   PHP Multidimensional Array Searching multiple values
  8.   PHP Ajax Image Upload Resize Crop using jQuery
  9.   WooCommerce Get Linked Products
  10.   PHP Laravel Inline CRUD Using jQuery and AJAX

Leave a Reply

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