autocomplete search with jquery-ui - doesn't work - laravel-5

Question

When I fill search box, auto-completion doesn't work correctly. My query doesn't work.
Below is my html code:
$(document).ready(function(){
$('#keyword').autocomplete({
source: function( request, response ) {
$.ajax({
url : '/search',
dataType: "json",
data: {
username: request.term
},
success: function( data ) {
response( $.map( data, function( item ) {
return {
id: '<B>' + item.id + '</B>',
value: item.value
}
}));
}
});
},
autoFocus: true,
minLength: 2,
select: function(event, ui) {
var url = ui.item.id;
if(url != '#') {
location.href = '/admin/users/' + url+ '/edit';
}
},
html: true,
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000);
}
});
});
<input name="keyword" id="keyword" class="form-control txt-auto"/>
my function
public function search(Request $request) {
$keyword = $request->input('keyword');
$results = array();
$user = User::where('username', 'LIKE','%'.$keyword.'%')->get();
foreach ($user as $query)
{
$results[] = [ 'id' => $query->id, 'value' => $query->username ];
}
return Response::json($results);
}
Route::get( '/search' , 'ShopController#search' );

Answer 1

I know i'm late to the party but I had this exact issue.
The z-index needs to be added while loading of your html:
What I did was I added this to one of my css files:
.ui-autocomplete {
z-index:2147483647;
}
After that, the autocomplete started working.

Answer 2

I haven't used autocomplete in a while, but I see two problems in your code. First, according to the docs
The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types foo, a GET request would be made to http://example.com?term=foo. The data itself can be in the same format as the local data described above.
Yet, you are using:
$keyword = $request->input('keyword');
instead of
$term = $request->input('term');
Second, maybe you need an ajax call inside the source option for something in particular, but you can simply do:
$('#keyword').autocomplete({
source: "/search",
select: function(event, ui) {
// ... do something here. Try logging the output
console.log(ui.item);
}
});