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的路由时，没有任何反应。

当我按回车（=提交表单）时，新页面加载了Hello World，但没有动态搜索结果。

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

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

非常感谢任何帮助！

Answer 1

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

如何使用Laravel Controller进行jQuery自动完成（=实时搜索）

1 个答案: