jQuery自动完成意外令牌<

Question

所以最近我使用 Devbridge 的 jQuery Autocomplete 制作了一个带有自动完成功能的 laravel 项目。我试图从数据库中获取建议，但没有显示任何内容。

Google Chrome 控制台显示“SyntaxError: Unexpected Token

两个错误都指向函数 Autocomplete() 的最后一行

transformResult: function (response) {
   return typeof response === 'string' ? $.parseJSON(response) : response;
}

这是我在 Bladeview 中输入的文本（transaksi/add）：

 {{Form::open(array('action' => 'TransactionController@store', 'role' => 'form'))}}
 <div class="box-body">
   <div class="form-group">
     {{Form::hidden('kode_acc')}}
     {{Form::label('kode', 'Kode Account') }}
     {{Form::text('kode', '', array('class' => 'form-control', 'id' => 'kode'))}}
   </div>
///some other inputs
 {{ Form::close() }}

路线：

//route autocomplete kode account
 Route::get('transaksi/getAccountsAutocomplete',array('uses'=>'AccountController@getAccountsAutocomplete'));

控制器

public function getAccountsAutocomplete(){
    $term = Input::get('kode');
    $suggestions = array();
    $search = DB::query("SELECT * 
                FROM  `accounts` 
                WHERE  `nama` LIKE  '%".$term."%')";
    foreach($search as $results => $account){
        $suggestions[] = array('id'=>$account->id,
                            'nama'=>$account->nama,
                            'value'=>$account->id);
    }
    return Response::json($suggestions);
}

jQuery 脚本

 $(function(){
  $('#kode').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "{{URL('/getAccountsAutocomplete')}}",
            data: {
                kode: request.term
            },
            success: function (data) {
                console.log("[SUCCESS] " + data.length + " item(s)");
                response(data);
            },
        });
    },
    select: function(event, ui){
        $('#kode_acc').val(ui.item.id);
    }
  });
 });

-- 更新--

附加信息

从 Chrome 网络，我刚刚发现查询转到

transaksi/add?query=

什么时候应该去

transaksi/getAccountsAutocomplete

到达控制器。

我对 jQuery 和 Laravel 还是很陌生。对这个问题有什么帮助吗？谢谢。

Answer 1

在服务器中，您发送的是 JSON 标头，因此，在您的 jvascript 文件中，您可以这样做：

$.ajax({
        url: "{{URL('/getAccountsAutocomplete')}}",
        dataType, "json",
        data: {
            kode: request.term
        },
        success: function (data) {
            // "data" es a json object. No need convert it
        },
    });

请参阅属性dataType，它指定了期望来自服务器的数据类型。但是，您应该调试您的函数以验证您要转换的数据类型：

transformResult: function (response) {
   console.log(response);
   return typeof response === 'string' ? $.parseJSON(response) : response;
}

编辑 1

为了调试你的路由（也许 Javascript ajax url 没有找到正确的控制器）你可以这样做：

// temporarily disable it
//return Response::json($suggestions);


// try to return a test json object 
return Response::json("controller found");

在您的回复中仍然打印 html 字符，则控制器未正确路由

编辑 2

在javascript代码中，你不能像以前那样放置php代码：

url: "{{URL('/getAccountsAutocomplete')}}",

实现这一点的一个好方法是在你的 head 部分创建一个全局 javascript 变量（必须放在任何 javascript 脚本之前）。

<script>
    var my_app_url = '<?php echo Url::to("/")?>';   
</script>

然后，您可以使用以下网址进行 ajax 请求：

$.ajax({
        url: my_app_url + "/getAccountsAutocomplete",
        dataType, "json",
        data: {
            kode: request.term
        },
        success: function (data) {
            // "data" es a json object. No need convert it
        },
    });

然后，您的 ajax 请求应该会找到您的控制器