Laravel5中的jQuery自动完成功能无法正常工作

时间:2015-02-27 19:47:36

标签: php jquery json autocomplete laravel-5

这是基本代码。我似乎无法在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);
}
}

查看: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>

它不起作用。当您在输入文本案例中写入内容时,它什么都不做。但是,如果我在Controller中注释某些行,则会显示数据库的数据(名字),但自动完成功能不起作用。

这是修改后的Controller功能:

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 个答案:

答案 0 :(得分:0)

我认为问题可能在于服务器端代码。尝试更改&#39; auto&#39;中的表单项名称。到这个术语&#39;,像这样:

...
public function getData() {
$term =  Request::input('term', 'r');
...

有关详情,请查看http://api.jqueryui.com/1.10/autocomplete/#option-source

答案 1 :(得分:-1)

嘿,我认为另一个人走在正确的轨道上。问题在于你的源json。您正在打印格式正确的JSON,它只需要在正确的密钥对中进行自动完成。根据{{​​1}}属性的Jquery UI自动完成文档,如果您要使用数组,则必须使用sourcelabel:

正确格式化它

所以只需格式化数据,如

value:

}

这是预先填写的json数组的工作小提琴 https://jsfiddle.net/7u73czt8/

但是如果您只想搜索它并且它将提交第一个名称作为输入标记值,您也可以只给它一个值。