Auto Complete with Laravel 5.2

Question

I already have a functional search box form my website, but i want to implement a auto complete functionality for my search bar. I know there are a bunch of plugins like typeahead, and etc. I would like to implement typeahead or the jQuery Autocomplete widget, if you guys know how. I seen some tutorials, but they don't work for the code i have. I will show you the blade, controller and route that I have for my search box.

How can I load all my data from my database into the source field in the jQuery plugin? I would want to load a flyers title for example?

show.blade.php:

@extends('home')

@section('content')
        <div id="the-basics">
            <input class="typeahead" type="text" placeholder="Title">
        </div>
@stop

@section('scripts.footer')
    <script type="application/javascript" src="{{ URL::asset('/src/public/js/typeahead.js') }}"></script>
    <script>
        $('#the-basics .typeahead').typeahead({
                    hint: true,
                    highlight: true,
                    minLength: 1
                },
                {
                    name: 'title',
                    source: 'travelflyers/search'
                });

    </script>

@stop

TravelFlyersController.php:

class TravelFlyersController extends Controller {

    // Other functions here...

     public function search() {
       $keyword = Input::get('keyword');
       $flyers = Flyer::where('title', 'LIKE', '%' .$keyword. '%')->get(); 
       return \Response::json($flyers);
     }


}

Route:

Route::group(['middleware' => ['web']], function () {

    /** Resource Route For Travel Flyers */
    Route::resource('travelflyers', 'TravelFlyersController');


    Route::post('travelflyers/search',[
        'uses' => '\App\Http\Controllers\TravelFlyersController@search',
        'as'   => 'travelflyers.search',
    ]);


});

Answer 1

Try this in your Routes File use GET instead of POST

Route::get('travelflyers/search',[
    'uses' => '\App\Http\Controllers\TravelFlyersController@search',
    'as'   => 'travelflyers.search',
]);

Answer 2

In your autocomplete method in jquery, make a call with Ajax to get data from your database through the controller. If you are not familiar with Ajax, you have to invest some time in learning. Here is a rough example to guide you how the things will work.

searchUrl ='http://www.yourwebsite.com/travelflyers/search'
 $( "#autocomplete" ).autocomplete({
    $.ajax({url: searchUrl, success: function(flyers){
    source: flyers;
 });

Another example here

It is not the exact example, but I hope you'll get the idea.

Answer 3

If you use typehead why you add a form and submit button you have to put only text box with id. typehead is working as ajax when you type some word ajax request to your controller and get the result

<div id="the-basics">
  <input class="typeahead" type="text" placeholder="Title">
</div>

    <script>
    $('#the-basics .typeahead').typeahead({
      hint: true,
      highlight: true,
      minLength: 1
    },
    {
      name: 'states',
      source: 'travelflyers/search'
    });

    </script>

and make sure your controller return JSON data don't return view it should be json data use var_dump in your controller and check from browser development tool it is json or not

Answer 4

change your routes to get method and pass query variable

Route::get('travelflyers/search/{query}',[
    'uses' => '\App\Http\Controllers\TravelFlyersController@search',
    'as'   => 'travelflyers.search',
]);

in your view

<script src="https://twitter.github.io/typeahead.js/js/jquery-1.10.2.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<div id="remote">
  <input class="typeahead" type="text" placeholder="Search Travel Flyers Here">
</div>
    <script>
    var bestPictures = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: {
        url: '/travelflyers/search/%QUERY',
        wildcard: '%QUERY'
      }
    });

    $('#remote .typeahead').typeahead(null, {
      name: 'best-pictures',
      display: 'title',
      source: bestPictures
    });

    </script>

in your controller

public function search($query) {        
    $flyers = Flyer::select('title')->where('title', 'LIKE', '%' .$query. '%')->get();
    return $flyers;
}

its not styled yet because i just copy and paste from official documentation, i already try that code and it works..