Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

GrahamMorbyDev's avatar

Displaying AJAX response

Hey Guys

So I have a 'Live Search' form Im working on and all returns are coming in ok with 200 codes but im getting no front end updates!

Front end

<div class="col-md-6 col-md-offset-3">
                <form action="/clientsearchresults" method="post">
                    <div class="form-group">
                        {{ csrf_field() }}
                        <label for="search">Search</label>
                        <input type="text" class="search_keyword" id="search" name="search" class="form-control" placeholder="Enter Clients Name">
                    </div>
                </form>

                <div id="result">

                </div>
            </div>

JS

$(".search_keyword").keyup(function () {
    var search_keyword_value = $(this).val();
    var dataString = 'search_keyword=' + search_keyword_value;
    if(search_keyword_value != '') {
        $.ajax({
            type: "POST",
            url: "/searching",
            data: dataString,
            cache: false,
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            success: function (html) {
                $("#result").html(html).show();
            },
            error: function () {
                alert('Not Okay');
            }
        });
    }
    return false;
});
$("#result").on("click", function (e) {
    console.log('Im Here');
    var $clicked = $(e.target);
    if (e.target.nodeName == "STRONG")
        $clicked = $(e.target).parent().parent();
    else if (e.target.nodeName == "SPAN")
        $clicked = $(e.target).parent();
    var $name = $clicked.find('.name').html();
    var decoded = $("<div/>").html($name).text();
    $('#search_keyword_id').val(decoded);
});

$(document).on("click", function (e) {
    var $clicked = $(e.target);
    if (!$clicked.hasClass("search_keyword")) {
        $("#result").fadeOut();
    }
});

$('#search_keyword_id').click(function () {
    $("#result").fadeIn();
});

and the controller

// Live Search
    public function searching() {
        $search_keyword = $_POST['search_keyword'];
        $searchClients = DB::table('clients')->where('company', $search_keyword)->get();

        $bold_search_keyword = '<strong>' . $search_keyword . '</strong>';

        if($searchClients) {
            foreach ($searchClients as $rows) {
                echo '<div class="show" align="left"><span class="name">' . str_ireplace
                    ($search_keyword, $bold_search_keyword, $rows['company']) . '</span></div>';
            }
        }
    }

Have no errors what so ever but simply have no display on typing

0 likes
3 replies
Goldoni's avatar

Hallo, controller

use Illuminate\Support\Facades\Response;
// Live Search
    public function searching() {
        $search_keyword = $_POST['search_keyword'];
        $searchClients = DB::table('clients')->where('company', 
        $search_keyword)->get();

        $bold_search_keyword = '<strong>' . $search_keyword . '</strong>';
        $html  = '';
        if($searchClients) {
            foreach ($searchClients as $rows) {
                $html .= '<div class="show" align="left"><span class="name">' . 
                str_replace($search_keyword, $bold_search_keyword,
                $rows['company']) . '</span></div>';
            }
        }
  $result['html'] = $html;
  return Response::json($result, 200, [], JSON_NUMERIC_CHECK);
    }

JS

$(".search_keyword").keyup(function () {
    var search_keyword_value = $(this).val();
    var dataString = 'search_keyword=' + search_keyword_value;
    if(search_keyword_value != '') {
        $.ajax({
            type: "POST",
            url: "/searching",
            data: dataString,
            cache: false,
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-
            token"]').attr('content') },
            success: function (response) {
                $("#result").html(response.data.html).show();
            },
            error: function () {
                alert('Not Okay');
            }
        });
    }
    return false;
});
squibby's avatar

In your ajax function console.log the html response. What is it returning and in what format. If you are getting a 200 its passing something back. Maybe need to set the expected response explicitly to html in ajax function.

GrahamMorbyDev's avatar

So a little bit of an update

I changed the controller to

public function searching() {
        $search_keyword = $_POST['search_keyword'];
        $searchClients = DB::table('clients')->where('company', 'like', '%'.$search_keyword.'%')->get();

        return response()->json($searchClients);

    }

Which is now providing results, just need to work out populating the screen

Please or to participate in this conversation.