使用 Laravel 5.2 自动完成

Question

我的网站已经有一个功能搜索框，但我想为我的搜索栏实现自动完成功能。我知道有很多插件，比如 typeahead 等等。我想实现 typeahead 或 jQuery Autocomplete widget，如果你们知道的话。我看过一些教程，但它们不适用于我拥有的代码。我将向您展示我的搜索框的刀片、控制器和路由。

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

show.blade.php：

@extends('home')

@section('content')
        <div id="the-basics">
            <input class="typeahead" type="text" placeholder="Title">
        </div>
@stop

@section('scripts.footer')
    <script type="application/javascript" src="{{ URL::asset('/src/public/js/typeahead.js') }}"></script>
    <script>
        $('#the-basics .typeahead').typeahead({
                    hint: true,
                    highlight: true,
                    minLength: 1
                },
                {
                    name: 'title',
                    source: 'travelflyers/search'
                });

    </script>

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


});

Answer 1

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

<div id="the-basics">
  <input class="typeahead" type="text" placeholder="Title">
</div>

    <script>
    $('#the-basics .typeahead').typeahead({
      hint: true,
      highlight: true,
      minLength: 1
    },
    {
      name: 'states',
      source: 'travelflyers/search'
    });

    </script>

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

Answer 2

在 jquery 的自动完成方法中，使用 Ajax 调用以通过控制器从数据库中获取数据。如果对 Ajax 不熟悉，就得花点时间学习。这里有一个粗略的例子来指导你如何工作。

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

Another example here

这不是确切的例子，但我希望你能明白。

Answer 3

更改您的路线以获取方法并传递查询变量

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

在你看来

<script src="https://twitter.github.io/typeahead.js/js/jquery-1.10.2.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<div id="remote">
  <input class="typeahead" type="text" placeholder="Search Travel Flyers Here">
</div>
    <script>
    var bestPictures = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: {
        url: '/travelflyers/search/%QUERY',
        wildcard: '%QUERY'
      }
    });

    $('#remote .typeahead').typeahead(null, {
      name: 'best-pictures',
      display: 'title',
      source: bestPictures
    });

    </script>

在你的控制器中

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

它还没有样式，因为我只是从官方文档中复制和粘贴，我已经尝试过该代码并且它可以工作..

Answer 4

在您的 Routes 文件中试试这个，使用 GET 而不是 POST

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