javascript - 如何将 jQuery 自动完成(=实时搜索)与 Laravel Controller 结合使用

Question

这是我的观点(部分)，由 Laravel Forms 生成:

<form method="POST" action="http://laravelapp/search" accept-charset="UTF-8">
    <input name="_token" type="hidden" value="g3RA...">
    <input type="text" placeholder="Search" id="terms">
</form>

<script>
$( function() {
    var testdata = [ "ActionScript", "AppleScript", "JavaScript" ];
    $( "#terms" ).autocomplete({
        minLength: 1,
        source: '{{ URL::route('index.search') }}'
        //source: testdata
    });
});
</script>

这些是index.search的路线:

Route::post('/search', 'IndexController@search')->name('index.search');

这是我的IndexController:

public function search(Request $request)
{
   return Response('Hello World');
}

为了简单起见，我用静态响应 Hello World 替换了实际的搜索算法。但是，如果我取消注释 javascript 代码中的 //source: testdata 行，自动完成功能就可以正常工作。当我使用 IndexController 的路由时，没有任何反应。

当我按 Enter 键(=提交表单)时，会加载一个包含 Hello World 的新页面，但没有动态搜索结果。

如您所见，我插入了 CSRF token ，并且 search() 方法返回有效响应。但是，它不是由 javascript 触发的。因此，我的问题是:

• 我的代码有什么问题？
• 路由应该是 GET 还是 POST？
• 输入字段周围是否应该有一个表单？通常的 jQuery 演示示例没有它，但 CSRF 保护可能需要它。

非常感谢任何帮助!

Answer 1

自动完成功能期望其源是数据数组。默认情况下，向客户端响应的方式是 json 格式。您应该尝试更改端点，不仅返回一个数组，还将该数组编码为 json 格式，以便自动完成功能知道如何处理它。