Laravel 5-数据库提前输入

Question

I'm trying to integrate Typeahead into a project in Laravel 5. I don't understand much about JQuery. I used static data and this works but I want to use dinamic data from Database. Then, I need to change in JQuery the parameter "source" and maybe something more. I saw some examples but none of them work, and I have not been able to understand them correctly. Any suggestions? Thanks.

routes/web

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

Controller

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

View (the view is a partial one that is called in all the pages)

          <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

Try this

Controller

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

Finally, I have made it work in a different way, in the absence of showing the results when the form is submitted:

Laravel - search with typeahead: show the results on submit