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.
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.