使用Laravel 5.2自动完成

我的网站已经有一个function搜索框,但我想为我的搜索栏实现自动完成function。 我知道有一堆插件,比如typeahead等等。我想实现typeahead或者jQuery Autocomplete小部件 ,如果你们知道怎么做的话。 我看过一些教程,但它们对我的代码不起作用。 我将向您展示我的搜索框中的刀片,控制器和路由。

如何将我的数据库中的所有数据加载到jQuery插件的源字段中? 我想加载传单标题例如?

show.blade.php:

@extends('home') @section('content') 
@stop @section('scripts.footer') $('#the-basics .typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'title', source: 'travelflyers/search' }); @stop

TravelFlyersController.php:

 class TravelFlyersController extends Controller { // Other functions here... public function search() { $keyword = Input::get('keyword'); $flyers = Flyer::where('title', 'LIKE', '%' .$keyword. '%')->get(); return \Response::json($flyers); } } 

路线:

 Route::group(['middleware' => ['web']], function () { /** Resource Route For Travel Flyers */ Route::resource('travelflyers', 'TravelFlyersController'); Route::post('travelflyers/search',[ 'uses' => '\App\Http\Controllers\TravelFlyersController@search', 'as' => 'travelflyers.search', ]); }); 

如果您使用typehead为什么要添加表单和提交按钮,则必须只放置带有id的文本框。 当您向控制器键入一些单词ajax请求并获得结果时,typehead将作为ajax工作

 

并确保您的控制器返回JSON数据不返回视图应该是json数据使用控制器中的var_dump并从浏览器开发工具检查它是否为json

在jquery的自动完成方法中,使用Ajax进行调用,以通过控制器从数据库中获取数据。 如果您不熟悉Ajax,则必须花一些时间学习。 这是一个粗略的例子,可以指导您的工作方式。

 searchUrl ='http://www.yourwebsite.com/travelflyers/search' $( "#autocomplete" ).autocomplete({ $.ajax({url: searchUrl, success: function(flyers){ source: flyers; }); 

另一个例子

这不是确切的例子,但我希望你能得到这个想法。

更改路由以获取方法并传递查询变量

 Route::get('travelflyers/search/{query}',[ 'uses' => '\App\Http\Controllers\TravelFlyersController@search', 'as' => 'travelflyers.search', ]); 

在你看来

   

在你的控制器中

 public function search($query) { $flyers = Flyer::select('title')->where('title', 'LIKE', '%' .$query. '%')->get(); return $flyers; } 

它没有风格,因为我只是从官方文档复制和粘贴,我已经尝试了该代码,它的工作原理..

路由文件中尝试使用GET而不是POST

 Route::get('travelflyers/search',[ 'uses' => '\App\Http\Controllers\TravelFlyersController@search', 'as' => 'travelflyers.search', ]);