使用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', ]);