Ajax搜索-Laravel

I am trying to create a live search using jquery, ajax and laravel. I also use pjax on the same page, this might be an issue?. Quite simply it should query the database and filter through results as they type.

When using Ajax type:POST I am getting 500 errors in my console. I get zero errors using GET but instead of returning in @foreach it will a full page view (this might be because of pjax).

Where am I going wrong?

Route:

Route::post('retailers/{search}', array(
    'as' => 'search-retailers', 'uses' => 'RetailersController@search'));

Controller:

public function search($keyword) {    
    if(isset($keyword)) {
      $data = array('store_listings' => RetailersListings::search($keyword));
      return $data;
    } else {
      return "no results";
    }
 }

Model:

  public static function search($keyword) 
  {
    $finder = DB::table('retailers_listings')
              ->Where('city', 'LIKE', "%{$keyword}%")
              ->orWhere('country', 'LIKE', "{$keyword}")
      ->orderBy('country', 'asc')
      ->get();

    return $finder;
  }  

View (store.blade.php):

<div id="flash"></div> //loading
<div id="live"> // hide content
<div id="searchword"><span class="searchword"></span></div> //search word
 <table class="table">
 <tbody>
  @foreach($store_listings as $store)
 <tr>
  <td></td> //echo out all fields eg: {{ $store->name }}
 </tr>
 @endforeach
 </tbody>
 </table>
</div> 

Form:

<form method="get" action="">
<input type="text" class="search-retailers" id="search"  name="search">
</form>

Ajax and JS:

$(function() {
    $("#search").keyup(function() {
        var keyword = $("#search").val();
        var dataString = 'keyword='+ keyword;


        if(keyword=='') {
        } else {
            $.ajax({
                type: "GET",
                url: "{{ URL::route('search-retailers') }}",
                data: dataString,
              cache: false,
              beforeSend: function(html) 
              {
                document.getElementById("live").innerHTML = ''; 
                $("#flash").show();
                $("#keyword").show();
                    $(".keyword").html(keyword);
                    $("#flash").html('Loading Results');
                },
                success: function(html)
                {
                    $("#live").show();
                    $("#live").append(html);
                    $("#flash").hide();
                }
            });
        } return false;
    });
});

Additional, Here is my controller for pjax, It is important to note I am using the view store.blade.php foreach in for the search and for this store listing.

public function stores($city) 
  {    
    $this->layout->header = $city;
    $content = View::make('retailers.stores', with(new RetailersService())->RetailersData())
    ->with('header', $this->layout->header)
    ->with('store_listings', RetailersListings::stores($city));

    if (Request::header('X-PJAX')) {
      return $content;
    } else { 
      $this->layout->content = $content; 
    } 
  }

Your route is Route::post('retailers/{search}', [...]) and there you go. You pass data to your ajax-call. In GET you get something like url?key=value but using POST the data are added to the request body not to the url. Knowing this your route is no longer valid since it only looks up for retailers/{search} and not for retailers only (which is the url POST is using).

Well maybe it could help somebody.

As a first problem you are defining the route as POST and then in the ajax request the type GET so it would not work

Also when making POST request Laravel has the csrf check so in order to work, provide it. The js function will be like

$(function() {
    $("#search").keyup(function() {
        var keyword = $("#search").val();
        if(keyword=='') {
        } else {
            $.ajax({
                type: "post",
                url: "{{ URL::route('search-retailers') }}",
                data: {
                    'keyword': keywork,
                    '_token': '{{ csrf_token() }}';
                },
                dataType: 'html',
              cache: false,
              beforeSend: function(html) 
              {
                document.getElementById("live").innerHTML = ''; 
                $("#flash").show();
                $("#keyword").show();
                    $(".keyword").html(keyword);
                    $("#flash").html('Loading Results');
                },
                success: function(html)
                {
                    $("#live").show();
                    $("#live").append(html);
                    $("#flash").hide();
                }
            });
        } return false;
    });
});

And you can test your PHP search method doing separate tests for it.