使用Laravel中的typeahead进行jQuery自动完成搜索

时间:2019-01-15 18:51:26

标签: laravel-5

我收到此错误:

GET http://auto.test/autocomplete?query= 500 (Internal Server Error)

我的路线(web.php):

Route::get('search', 'SearchController@index')->name('search');
Route::get('autocomplete', 'SearchController@autocomplete')->name('autocomplete');

我的SearchController:

use App\Item;
use Input;
use Responce;

    public function index()
    {
        return view('search');
    }

    public function autocomplete(Request $request)
    {
        $data = Item::select("name")->where("name", "LIKE", "%{$request->input('name')}%")->get();

        return responce()->json($data);
    }

在我的主视图(search.blade.php)中:

<body>
    <div class="container">
        <h1>Search Name by Auto Complete</h1>
        <input type="text" class="typeahead form-control" name="" id="">
    </div>

    <script type="text/javascript">
        var path = "{{ route('autocomplete') }}";

        $("input.typeahead").typeahead({
            source:function(query, process) {
                return $.get(path, {query:name}, function(data) {
                    return process(data);
                })
            }
        });
    </script>
</body>

包括最新的JQuery文件和cloudflare的bootstrap3-typeahead.js。难道我做错了什么。任何帮助或建议都将受到高度赞赏。

2 个答案:

答案 0 :(得分:0)

您错误地传递了ajax请求参数。但是在您的代码中,您希望收到输入参数“名称”,因此可能如下所示

<script type="text/javascript">
        var path = "{{ route('autocomplete') }}";

        $("input.typeahead").typeahead({
            source:function(query, process) {
                return $.get(path, {name:query}, function(data) {
                    return process(data);
                })
            }
        });
    </script>

答案 1 :(得分:0)

我今天开始使用此功能。而且我还在学习。所以...我想您忘记了输入的名称和ID。