Implement Laravel/AJAX search bar

Question

Hello I can do a standard AJAX/PHP search but finding it hard to convert to Laravel. I'm using key up instead of button click. I'm not sure if this is the right way im going about to implement an ajax/laravel search bar. I'm looking to output the database data into the div in the view page, but need help on going about this. If anyone thinks im doing this wrong please advise me. Always willing to learn new code.

Controller:

<?php

namespace App\Http\Controllers;

use App\Patient;

use DB;

use Illuminate\Http\Request;

class PatientController extends Controller
{


public function search(Request $request) {
    // get the search term
    $text = $request->input('text');

    // search the members table
    $patients = DB::table('patients')->where('firstname', 'Like', $text)->get();


    // return the results
    return response()->json($patients);
}

}

Route:

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

View:

   @extends('Layout.master')


@section('content')


  <!-- Ajax code -->

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


    <script type="application/javascript">
    $(document).ready(function(){

        $('#txtSearch').on('keyup', function(){

            var text = $('#txtSearch').val();

            $.ajax({

                type:"GET",
                url: '127.0.0.1:8000/search',
                data: {text: $('#txtSearch').val()},
                success: function(data) {

                    console.log(data);

                 }



            });


        });

    });
    </script>

    <div style="margin-top:70px;"></div>


       @include('partials._side')

    <div class="container">

                     <form method="get" action="">

                    <div class="input-group stylish-input-group">
                        <input type="text" id="txtSearch" name="txtSearch" class="form-control"  placeholder="Search..." >
                        <span class="input-group-addon">
                            <button type="submit">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>  
                        </span>
                    </div>

                     </form> 


          <div id="result"></div>

</div>

@endsection

Yes! I got so close. Now I am getting an error message of this from console.log - SyntaxError: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL — steven, Jan 20 '17 at 23:27
please comment below [my answer](http://stackoverflow.com/a/41771251/1880431) — meda, Jan 20 '17 at 23:32

meda · Accepted Answer · 2017-01-20T23:30:22.480

1

In your AJAX request change:

'127.0.0.1:8000/search'

to

'/search'

I suggest you to use jQuery Autocomplete

Very easy to set up.

Check out the API documentation.

edited Jan 20 '17 at 23:30

answered Jan 20 '17 at 19:47

meda

45,103
14
92
122

He might not want to load the entire list of patients onto the client computer for this to function. – Matt Altepeter Jan 20 '17 at 20:59
you don't have to, it could be an ajax request to a laravel endpoint – meda Jan 20 '17 at 21:00
Which doesn't really solve his problem as he is having difficulty getting Laravel to respond in the first place.... – Matt Altepeter Jan 20 '17 at 21:01
@MattAltepeter OP never said what is not working, how can I guess – meda Jan 20 '17 at 21:10
@steven ok great! – meda Jan 20 '17 at 23:33
@meda If i want to output a table with data will i need to put the table in the Patientcontroller page? – steven Jan 20 '17 at 23:35
once you get the data you can create table with javascript – meda Jan 20 '17 at 23:36
like to access the data in the view - do i touch this -- // return the results return response()->json($patients); – steven Jan 20 '17 at 23:41
@meda wrong example lol i don't need javascript for this :? no other simpler ways? – steven Jan 20 '17 at 23:47
what do you mean you are using ajax, thats javascript – meda Jan 20 '17 at 23:48
yeah but can i not create with html? and use laravel foreach loop to loop through the data? – steven Jan 20 '17 at 23:49
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133683/discussion-between-meda-and-steven). – meda Jan 20 '17 at 23:49

Matt Altepeter · Answer 2 · 2017-01-20T20:00:00.693

Depending on your version of Laravel (new versions use this):

use Illuminate\Http\Request;

public function search(Request $request) {
    $text = $request->input('text');

    $patients = DB::table('patients')->where('firstname', 'Like', "$text")->get();

    return response()->json($patients);
}

And then in javascript:

$(document).ready(function(){

    $('#txtSearch').on('keyup', function(){

        var text = $('#txtSearch').val();

        $.ajax({

            type:"GET",
            url: 'search',
            data: {text: $('#txtSearch').val()},
            success: function(response) {
                 response = JSON.parse(response);
                 for (var patient of response) {
                     console.log(patient);
                 }
             }



        });


    });

});

https://laravel.com/docs/5.1/requests#retrieving-input.

Comments are not for extended discussion; this conversation has been [moved to chat](http://chat.stackoverflow.com/rooms/133685/discussion-on-answer-by-matt-altepeter-implement-laravel-ajax-search-bar). — user229044, Jan 21 '17 at 00:16

score 0 · Answer 3 · answered Jan 20 '17 at 19:51

0

If you mean handle result in browser, please check inside your AJAX coded with jQuery, "response" variable is the server coming back data. You just need to populate the returned data into your page after AJAX finished.

For example put into

<div id="searchResult"></div>

You need put below inside your ajax after response coming back with jquery like:

$("#searchResult").html(response);

answered Jan 20 '17 at 19:51

Mr Hoelee

446
2
7
24

So you think I'm going in the right direction with the above code if i fix that mistake u point out? – steven Jan 20 '17 at 19:53
Yes, it work this way. Unless server return nothing. – Mr Hoelee Jan 20 '17 at 19:56
return response()->($patients); Is this line of code correct? if im using a mysql database. – steven Jan 20 '17 at 19:58
Sorry, I don't use PHP. Only can help front-end, try check result return or not ya. Thanks. – Mr Hoelee Jan 20 '17 at 20:01

Implement Laravel/AJAX search bar

3 Answers3