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

在路由文件中使用GET代替POST

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

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

如果您使用打字头为什么添加表单和提交按钮，则必须只放置带有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 4

将路线更改为get方法并传递查询变量

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;
}

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

使用Laravel 5.2自动完成

4 个答案: