Need Help with Ajax Search Implementation

Hi! I'm trying to implement this: https://gist.github.com/imranismail/10200241 but it's not working. Here is my code:

test-search.blade.php

<div class="col-md-12">
    <p>Please enter your search terms below.</p>
    <form class="form-horizontal basicSearch" role="form" action="test-search/autocomplete" method="GET">
        <div class="form-group">
        <input id="searchbox" class="form-control" type="search" name="q" placeholder="Enter keywords to search and hit enter" autocomplete="on">
        </div>                        
    </form>

<p>Show results below:</p>                              
{{ $profile->first_name }} {{ $profile->last_name }}
        
</div>

controller.php

public function autocomplete(Request $request)
{
    $searchkeyword = $request->input('q');
        
    $memberprofiles = DB::table('member_profiles')
            ->where('first_name', 'LIKE', '%'.$searchkeyword.'%')
            ->orWhere('last_name', 'LIKE', '%'.$searchkeyword.'%')
            ->get();
            
    $results = array();
        
    foreach ($memberprofiles as $profile)
    {
            $results[] = [ 
            'id' => $profile->id, 
            'value' => $profile->first_name.' '.$profile->last_name 
        ];
    }
        
        return Response::json($results);
    }

js file

<script> // ajax search
$(function()
{
    $( "#searchbox" ).autocomplete({
        source: "test-search/autocomplete",
        minLength: 3,
        select: function(event, ui) {
            $('#searchbox').val(ui.item.value);
        }
    });
});
</script>

jquery and jquery ui

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

I'm not getting any error. When I enter a search term, nothing happens. No result is being displayed. What's wrong with my code?