Laravel Ajax Search

0
votes

I am trying to create a search form, which searches for a record in a database table while the user is typing into the search field.


Controller
public function search() {
    // get the search term
    $term = Input::get('term');

    // search the members table
    $members = DB::table('members')
                ->where(concat("members.member_first_name,' ',members.member_last_name"), 'LIKE', "$term")
                ->orwhere(concat("members.member_last_name,' ',members.member_first_name"), 'LIKE', "$term")
                ->orwhere(concat("members.member_name_affix,' ',members.member_last_name,' ',members.member_first_name"), 'LIKE', "$term")
                ->orwhere(concat("members.member_first_name,' ',members.member_name_affix,' ',members.member_last_name"), 'LIKE', "$term")
                ->orwhere('members.member_first_name', 'LIKE', "$term")
                ->orWhere('members.member_last_name', 'LIKE', "$term")
                ->orWhere('members.member_business_address', 'LIKE', "$term")
                ->get();

    // return the results in JSON format
    return response()->json($members);
}

Route

Route::get('search', 'mitgliederverzeichnisController@search');

View

<!-- THE SEARCH FORM -->
<form method="GET" id="search-form">
    <input type="search" id="term" name="term" onkeyup="ajaxSearch()" placeholder="Search the members table..." autofocus>
</form>

<!-- THE AJAX FUNCTION -->
 <script>
     function ajaxSearch() {
         $.ajax({
             url: 'search',
             type: 'GET',
             data: {term: $('#term').val()},
             dataType: 'JSON',
             success: function(response) {
                 console.log(data);
             }
         });
     }
 </script>

<!-- THE RESULTS TABLE -->
<div class="clear"></div>
<div id="resultTableWrapper">
    <table id="resultTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Address</th>
                <th>Business Address</th>
                <th>Join Date</th>
            </tr>
        </thead>
        <tbody></tbody>
     </table>
 </div><!-- /#resultTableWrapper -->
 <div class="clear"></div>
 <p id="search-info">Please type your search phrase in the field above.</p>

<!-- USE THE JSON RESPONSE TO FILL THE RESULTS TABLE -->
@if (isset($_GET['term']))
    @foreach ($members as $member)
        <tr>
            <td>
                <strong>
                    {!! $member->member_name_affix.' '.$member->member_last_name.' '.$member->member_first_name.' '.$member->member_title !!}
                </strong><br><br>
                <div class="unhighlight">
                    {!! $member->member_business_position !!}<br><br>
                    {!! $member->member_business_name !!}
                </div>
            </td>
            <td class='unhighlight'>
                @if ($member->member_private_address)
                    <span>
                        {!! $member->member_private_address !!} <br>
                        {!! $member->member_private_zip_code. ' ' .$member->member_private_location !!}
                    </span><br>
                    <div class='clear'></div>
                @endif
            </td>
            ... and so on ...
        </tr>
    @endforeach
@endif



The error message I am getting when I start typing the letter 'a' into the search field:
GET http://localhost.local/search?term=a 500 (Internal Server Error)


I am very new to laravel and I would be very thankful for any kind of help!

UPDATE

Thanks to amieiro I managed to figure out that the error seems to be with the Input::get() method:
enter image description here
3
phpajaxlaravelsearchlaravel-5.2
Internal server error usually means that you messed up something in your code. Check your laravel storage/logs folder or apache logs for hints on what it is. – Chibueze Opata
Thank you for the help. However, I can only find .gitignore files in the logs folder. – Schwesi
You should check body of ajax response. It would have more information what is wrong. You can inspect it in developer tools. You can look at this example for Chrome. – Krzysztof Atłasik
Actually error is within your where clause you cannot use concat function in where clause in order to use concat you need to use whereRaw('concat("members.member_first_name,' ',members.member_last_name" LIKE ?',array("%$term%")) – Narendrasingh Sisodia
@yariash Thank you for pointing that out. I updated my answer! – Schwesi

3 Answers

3
votes

You can inspect the error trying to see the JSON. In Google Chrome you can see it inspecting the element, reloading the page and then in the Network tab, XHR filter. You can see it in the next image

enter image description here

2
votes

As per your update you need to include Input within your controller simply using

use App\Http\Controllers\Input;

at the top of the file after namespace. Instead of using Input facade you can use Request facade for better coding standards

1
votes

Change your query like this, in where or orWhere first param shuould be column name also add % around $term and remove unnecessary where conditions.

public function search(Request $request) {
$term = $request->input('term');
$members = DB::table('members as m')
            ->where('m.member_first_name', 'LIKE', "%$term%")
            ->orWhere('m.member_last_name', 'LIKE', "%$term%")
            ->orWhere('m.member_business_address', 'LIKE', "%$term%")
            ->get();
return response()->json($members);
}