jQuery Autocomplete in Laravel5 not working
Question
This is the basic code. I cannot seem to get it to work in Laravel 5:
routes.php
Route::get('h2h', 'atp_players\H2hController@getIndex');
Route::get('h2h_getdata', 'atp_players\H2hController@getData');
H2hController.php
namespace Atpstats\Http\Controllers\atp_players;
use Atpstats\Http\Controllers\Controller;
use Response;
use Request;
class H2hController extends Controller{
public function getIndex() {
return view('atp_players.h2h');
}
public function getData() {
$term = Request::input('auto', 'r');
$results = \DB::table('atp_players')->select('firstname')->get();
$data = array();
foreach($results as $result) {
if(strpos($result,$term) !== false) {
$data[] = ['value' => $result->firstname];
}
}
return Response::json($data);
}
}
View: h2h.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<div class="container">
<div class="ui-widget">
<label for="">Find a player</label>
<input type="text" class="form-control input-sm" name="auto" id="auto" autocomplete="on">
</div>
<div class="form-group">
<label for="">Response</label>
<input type="text" class="form-control input-sm" name="response" id="response" disabled>
</div>
<script>
$('#auto').autocomplete({
type: "get",
source: 'h2h_getdata',
dataType: "json",
minLength: 1,
select:function(e,ui){
$('#response').val(ui.item.value);
}
});
</script>
</body>
</html>
It doesn't work. It's doing nothing event when you write something to the input text case. But if I comment some lines in Controller, the data (firstname) of the DB appear but autocomplete doesn't work.
And that's the modified Controller function:
public function getData() {
//$term = Request::input('auto', 'r');
$results = \DB::table('atp_players')->select('firstname')->get();
$data = array();
foreach($results as $result) {
//if(strpos($result,$term) !== false) {
$data[] = ['value' => $result->firstname];
//}
}
return Response::json($data);
}
2 answers
solution1
0 2015-02-27 20:22:26
I think the problem may lay on server side code. Try changing the form item name from 'auto' to 'term', like this:
...
public function getData() {
$term = Request::input('term', 'r');
...
For more info check http://api.jqueryui.com/1.10/autocomplete/#option-source
solution2
-1 2016-05-08 00:01:45
Hey I think the other guy is on the right track. The problem lies in your source json. You are printing correctly formatted JSON it just needs to be in the right key pair for autocomplete. According to the Jquery UI autocomplete documentation for the source attribute if you're going to use an array you must have it formatted correctly with label: and value:
So just format the data like
public function getData() {
//$term = Request::input('auto', 'r');
$results = [['firstname' => 'Edwardo', 'ID' => '12'], ['firstname' => 'Edwarda', 'ID' => '13']];
//$results = \DB::table('atp_players')->select('firstname')->get();
$data = array();
foreach($results as $result) {
if(strpos($result,$term) !== false) {
$temp = array();
// This is what will be displayed by autocomplete
$temp['label'] = $result->firstname;
// This will be the value you get back through form (eg: User_ID)
$temp['value'] = $result->ID;
array_push($data, $temp);
}
}
return Response::json($data);
}
Heres a working fiddle with the json array pre-filled out https://jsfiddle.net/7u73czt8/
But you can also just just give it a value if you want to just search on that and it will submit the first name as the input tag value.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.