0

I'm making an app, where I have a users table on the INDEX with a search box above, where you're able to perform ajax search. My problem is, that so far I could only do the ajax search on a separate page, because it's a GET request on the INDEX, as well as my original INDEX request, where the PHP shows all the entries. Therefore, if I direct my search onto the INDEX, the page reloads anyways because of the \App\User::all(); PHP function.

My goal is to have just a single page, where I have my users table with all the entries, but when I perform some search, only the relevant entries get displayed in the table.

My current routes:

Route::resource('index', 'UsersController');
Route::get('results', 'SearchesController@search');

My search function:

public function search(Request $request) {
            
            $keyword = $request->get('keyword');

            if($keyword !== ''){
                $users = \App\User::where("username", "LIKE","%$keyword%")
                        ->orWhere("firstname", "LIKE", "%$keyword%")
                        ->orWhere("lastname", "LIKE", "%$keyword%")
                        ->orWhere("email", "LIKE", "%$keyword%")
                        ->orWhere("phone", "LIKE", "%$keyword%")->get();
                
                    return view('pages.results', array( 'users' => $users ));
                    
            } elseif(empty($users) || $keyword == "") {
                
                    return view('pages.results');
            }
        }

My current view (the same both on INDEX and RESULTS pages):

@if(isset($users) && !$users->isEmpty())
        <tr>
          <th class='text-center'>Username</th>
          <th class='text-center'>Firstname</th>
          <th class='text-center'>Lastname</th>
          <th class='text-center'>Email</th>
          <th class='text-center'>Phone</th>
          <th class='text-center'></th>
        </tr>
        @foreach($users as $user)
        <tr>
          <td class='text-center'>{{$user->username}}</td>
          <td class='text-center'>{{$user->firstname}}</td>
          <td class='text-center'>{{$user->lastname}}</td>
          <td class='text-center'>{{$user->email}}</td>
          <td class='text-center'>{{$user->phone}}</td>
          <td class='text-center'>{!! link_to_action('UsersController@edit', 'Edit', $user->id, ['class'=>'btn btn-warning', 'style'=>'margin-bottom:5px']); !!}
                                    {!! Form::open(['action' => ['UsersController@destroy', $user->id], 'method' => 'DELETE']) !!}
                                        {!! Form::submit('Delete', ['class'=>'btn btn-danger']) !!}
                                    {!! Form::close() !!}</td>
        </tr>
        @endforeach
    @else
    <td class="text-center"><b>No results found, please try again.</b><br /><a href="{{ url('index') }}"><b>Display All</b></a></td>
    @endif

My current JS:

$('.searchbar').keypress(function (e) {
        if (e.which == 13) {
    
            $.ajax({
                dataType: "json",
                url: '/results',
                data: {keyword: $('.searchbar').value()},
                success: function (result) {
                        console.log($user.name);
                },
                error: function(){
                        console.log("No results.");
                }
            });
            
        }
    });

Thanks in advance!

sklrboy
  • 441
  • 1
  • 6
  • 15
  • 1
    I don't see any reason to use ajax if all you want to do is filter results on your index page. This can be done with javascript. [example here](http://stackoverflow.com/questions/9127498/how-to-perform-a-real-time-search-and-filter-on-a-html-table) – Palo Nov 18 '16 at 13:50
  • 1
    As for your code: you are returning whole view in your controller instead of data that you could use in your javascript. You should check out [this](http://stackoverflow.com/questions/28634712/how-can-i-return-a-view-from-an-ajax-call-in-laravel-5) – Palo Nov 18 '16 at 13:58
  • Thanks man for the clever answers, they're really useful! – sklrboy Nov 18 '16 at 14:00
  • 1
    Post it as your answer, so I can accept it for you! ;) – sklrboy Nov 18 '16 at 14:11

1 Answers1

1

I don't see any reason to use ajax if all you want to do is filter results on your index page. This can be done with javascript (example)

As for your code: you are returning whole view in your controller instead of data that you could use in your javascript. You should check out this. After that just replace your data in html with data returned from ajax.

Community
  • 1
  • 1
Palo
  • 373
  • 1
  • 12