CodeIn House

  • Laravel
  • WordPress
  • jQuery
  • Javascript
  • Contact
Home   jQuery   Laravel Autocomplete Search from database using jQuery

Laravel Autocomplete Search from database using jQuery

August 16, 2017 by SNK

Laravel Autocomplete search from Database

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 ?

  1. Prepare the migration and database from where we are going to fetch the data while searching.
  2. Create a sample view to show the demonstration of using it.
  3. 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 :-

2017_08_16_024206_create_tbl_datas_table.php
PHP
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 :-

Auto Complete Code
JavaScript
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 :-

web.php
PHP
1
2
3
Route::get('/','AdminController@index');
 
Route::get('display-search-queries','AdminController@searchData');

Now the controllers (I have created the AdminController ).

AdminController.php
PHP
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.

SHARE ON
Buffer

Enjoyed this article?

Like us on

jQuery Laravel laravel 5 autocomplete laravel 5 jquery autocomplete laravel 5.2 autocomplete laravel 5.3 autocomplete laravel 5.4 autocomplete laravel autocomplete from database laravel autocomplete search from databas laravel smart search

Avatar for SNK

About SNK

Hello Welcome to my Blog. I develop Websites Using Laravel Framwork & WordPress. Get Latest updates on Facebook | Twitter

Leave a Reply Cancel reply

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

Get Connected !! With Us

TOP POSTS

  • How to Setup Spring MVC Project From Scratch in Intellij IDEA ?
  • Spring Configuration Class in JAVA [Class VS XML Config]
  • Annotations Based Configuration in Spring Framework
  • How to Configure Spring Framework with XML Configurations?
  • How to Remove Project Name from URL in JSP Project in Intellij IDEA ?

TUTORIALS TILL DATE

  • September 2022 (6)
  • June 2021 (7)
  • October 2020 (5)
  • September 2020 (6)
  • September 2018 (14)
  • August 2018 (3)
  • July 2018 (4)
  • March 2018 (8)
  • February 2018 (5)
  • January 2018 (1)
  • December 2017 (2)
  • August 2017 (8)
  • May 2017 (1)
  • April 2017 (1)
  • March 2017 (4)
  • February 2017 (3)
  • January 2017 (4)

CATEGORIES

  • Angular (2)
  • CSS3 (3)
  • D3 (3)
  • HTML5 (7)
  • JAVA (11)
  • Javascript (20)
  • jQuery (8)
  • Laravel (35)
  • Others (3)
  • PHP (11)
  • Spring (2)
  • WordPress (10)

Top Categories

  • Angular
  • CSS3
  • D3
  • HTML5
  • JAVA
  • Javascript
  • jQuery
  • Laravel
  • Others
  • PHP
  • Spring
  • WordPress

Get in Touch

DMCA.com Protection Status

Recent Articles

  • How to Setup Spring MVC Project From Scratch in Intellij IDEA ?
  • Spring Configuration Class in JAVA [Class VS XML Config]
  • Annotations Based Configuration in Spring Framework
  • How to Configure Spring Framework with XML Configurations?
  • How to Remove Project Name from URL in JSP Project in Intellij IDEA ?

© 2012-22 CodeIn House.  •  All Rights Reserved.