In this tutorial we will perform laravel autocomplete search from database using jquery autocomplete plugin. You can get the search suggestion from the database and these type of search are mostly found on today’s search trend.
If you are looking for suggestion best search, then this is the best way to do it, very easy and you dont have to write anything of your own. Jquery UI and its CSS does all the work.
It is very easy to integrate using jquery autocomplete plugin. You need to use jquery library and you are good to go. So lets see how can we integrate it in our laravel application.
Lets get started
What are we going to to ?
- Prepare the migration and database from where we are going to fetch the data while searching.
- Create a sample view to show the demonstration of using it.
- Prepare controller and routes.
Step 1:-
Create the migration file by going to command line and type : php artisan make:model tbl_data -m and enter.
If you want to use the structure of my migration, look below :-
|
1 2 3 4 5 6 7 8 9 |
public function up() { Schema::create('tbl_datas', function (Blueprint $table) { $table->increments('id'); $table->string('title'); $table->string('slug'); $table->timestamps(); }); } |
Migrate it and add some dummy data into the database so that you could get at least something while searching for the data through autocomplete.
Step 2 :-
Lets create a view in resources/views and name it as autocomplete.blade.php for this tutorial.
Paste this code. I have used latest boostrap 4 to make it look more cooler.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<html> <head> <title> Laravel jQUery Auto Complete </title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <style> * { margin: 0px auto; !important /* Aligning all the data to center */ } </style> </head> <body> <div class="container" style="margin-top: 10px;"> <div align="center"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-12"> <form action=""> <div class="form-group"> <div class="ui-widget"> <label for="">Search for Anything</label> <input id="searchString" type="text" name="search_string" placeholder="Enter Search String" class="form-control" /> </div> </div> </form> </div> </div> </div> </div> </center> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> </body> </html> |
Now, the jQuery autocomplete to fetch the data from database. Copy the javascript code below :-
|
1 2 3 4 5 6 7 8 9 10 |
$( function() { $( "#searchString" ).autocomplete({ //html : html, source: "display-search-queries", minLength: 1, select:function(e,ui) { location.href = ui.item.link; } } ); } ); |
Step 3:-
Lets prepare routes and controllers. I have prepared like this below :-
|
1 2 3 |
Route::get('/','AdminController@index'); Route::get('display-search-queries','AdminController@searchData'); |
Now the controllers (I have created the AdminController ).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Response; use DB; class AdminController extends Controller { public function index() { return view('autocomplete'); } public function searchData(Request $request) { $term = $request->get('term'); $data = DB::table('tbl_datas')->where("title","LIKE","%$term%")->select('title as value','slug as link')->get(); return response()->json($data); // Something to note here : autocomplete takes value as your data so your title should be displayed as value as i did in my query else data will not be displayed } } |
This is it, we have successfully integrate jQuery autocomplete in our laravel application. Now use it in your real world application.
Leave a Reply