Laravel 5 - 来自数据库的提前输入

Question

我正在尝试将 Typeahead 集成到 Laravel 5 中的一个项目中。我对JQuery了解不多。我使用了静态数据，这很有效，但我想使用数据库中的动态数据。然后，我需要更改 JQuery 中的参数 "source" 以及更多内容。我看到了一些示例，但其中 none 有效，但我无法正确理解它们。有什么建议么？谢谢。

routes/web

Route::get('partials/buscador', ['as'=>'search','uses'=>'SearchController@search']);

控制器

class SearchController extends Controller
{
    public function search(Request $request) {
        $data = LangNoticia::where("title","LIKE","%{$request->input('query')}%")->get();
        return response()->json($data);
    }
}

视图（视图是局部视图，所有页面都会调用）

          <div class="typeahead__container">
                <div class="typeahead__field">

                    <span class="typeahead__query">
                        <input class="search_input" name="search" placeholder="{!!__('header.buscar') !!}" autocomplete="off" type="search">
                    </span>

                    <span class="typeahead__button">
                        {!! HTML::image('images/web/icons/lupa.svg', 'buscar',  array('height' => '30', 'class' => 'buscar') ) !!}
                    </span>

                </div>
            </div>

JavaScript

    $(document).ready(function(){

    var src = "{{ route('search') }}";

    $.typeahead({
        input: '.search_input',
        minLength: 1,
        maxItem: 8,
        maxItemPerGroup: 6,
        order: "asc",
        cache: true,

        /* source -> This I need to change to dinamic data from database (see controller) */

        source: {
            data: [
            "One",
            "Two",
            "Three"
        ]
        },

        callback: {
            onInit: function (node) {
                console.log('Typeahead Initiated on ' + node.selector);
            }
        }
    });

});

Answer 1

试试这个

控制器

class SearchController extends Controller
{
    public function search(Request $request) {
        $data = LangNoticia::where("title","LIKE","%{$request->text}%")->pluck("title");
        return response($data->all());
    }
}

Javascript

$(document).ready(function(){

    var src = "partials/buscador";

    $.typeahead({
        input: '.search_input',
        minLength: 1,
        maxItem: 8,
        maxItemPerGroup: 6,
        order: "asc",
        cache: true,

        /* source -> This I need to change to dinamic data from database (see controller) */
        source: {
            data: $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: src,
                method: 'GET',
                dataType: 'json',
                data: {
                    text: $('.search_input').val()
                },
                success: function(data){
                    return data;
                }
            });
        },

        callback: {
            onInit: function (node) {
                console.log('Typeahead Initiated on ' + node.selector);
            }
        }
    });

});

Answer 2

最后，在提交表单时没有显示结果的情况下，我以不同的方式让它工作：

Laravel - search with typeahead: show the results on submit

Laravel 5 - 来自数据库的提前输入

Laravel 5 - Typeahead from database

javascript

php

jquery

laravel

typeahead.js