带有Typeahead js库的Laravel 5.7,如何从搜索中选择特定项目进入另一个页面?

时间:2019-02-18 20:36:41

标签: jquery ajax typeahead.js laravel-5.7 bootstrap-typeahead

我正在使用Typeahead Js中的laravel 5.7库在搜索栏中显示自动完成功能。它工作正常,但我想单击特定的项目将我重定向到它的特定记录。简单来说,我想使用laravel将具有特定项目id的链接链接到另一页。

我尝试了jquery ui和kendu ui自动完成功能,但在我的情况下不起作用,也许我可能无法正确配置这些库,但知道这对我来说很头疼。我有我的工作代码,但我想要链接。

View Code:

<form class="app-search position-absolute">
  <input type="text" id="search" name="search" class="typeahead form-control" autocomplete="off" placeholder="Search &amp; enter">
  <a class="srh-btn"><i class="ti-close"></i></a>
</form>


Script Code:

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


Controller Code:

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

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

Route Code:

Route::get('search', 'HomeController@search')->name('search');

我真的需要帮助。我想让它像Google一样,当我们开始键入它时会显示建议,当单击该特定结果时,它将直接移至该特定URL。任何帮助将不胜感激。

0 个答案:

没有答案