在 laravel 5.3 中将我的实时搜索（使用 select2）连接到我的表

Question

在这里，我没有使用数据表。我尝试分别创建实时搜索和表格。我使用的指南在 select2 中，但他们的实时搜索未连接到表（我的意思是，当您尝试在数据表中搜索时，结果将显示在表中）..所以问题是，如何我可以将我的实时搜索连接到我的表吗？

我的看法

@extends('layout.default')
@section('content')
<br><br>
<br><br>
<div class="container">
    <h4>Live Search using Laravel</h4>

    <div class="col-md-6 col-lg-6 pull-right" >

        <p class="pull-right">Click on the zip logo to download the file:<p>

            <a href="/live_search_laravel.zip" download="live-search(laravel).zip">
                <br><br>
                <img border="0" src="/images/ziplogo.png" class="pull-right" alt="AngularJS" width="50" height="42">

            </a>
        </div>



    </div>
    <br>
    <div class="col-md-6 col-lg-4 pull-right">
        <select class="js-example-basic-multiple" multiple="multiple">
            @foreach($data as $files)
            <option value="AL">{{ $files->original_filename }} </option>

            @endforeach
        </select>
    </div>
    <br><br>
    <div class="col-md-12 col-sm-6 col-xs-12">
        <div class="x_panel">

            <div class="x_content">
                <table class="table table-hover">

                    <tr>

                        <th>
                            Original File Name
                        </th>
                        <th>
                            Change File Name
                        </th>
                        <th>
                            File Extension
                        </th>
                        <th>
                            Image
                        </th>
                        <th>
                            Category
                        </th>
                        <th>
                            Status
                        </th>
                    </tr>
                    @foreach($data as $file)
                    <tr>

                        <th>{{ $file->original_filename}}</th> 
                        <th>{{ $file->rs_filename}}</th>
                        <th>{{ $file->file_extension}}</th>
                        <th><img src="/files/images/{{ $file->rs_filename }} "  width ="50px" height ="50px"></th>
                        <th>@if($file->category=="1"){{ "Laravel" }}@endif</th>
                        <th>
                            @if($file->status=="0")
                            <form action="/activateImage/{{  $file->id}}" method="post">
                                <input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
                                <button type="submit" class="btn btn-primary">Activate</button>
                            </form>
                            @else
                            <form action="{{ url('deactivateImage', ['id' => $file->id]) }}" method="post">
                                <input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
                                <button type="submit" class="btn btn-primary">Deactivate</button>
                            </form>
                            @endif
                        </th>

                    </tr>
                    @endforeach
                </table>
            </div>
        </div>
    </div>
    <h4>All Activated Images</h4>
    @foreach($data as $file)


    @if($file->status=="1")
    <div class ="row">
        <div class ="form-group">
            <img src="/files/images/{{ $file->rs_filename }} "  width ="50px" height ="50px">
        </div>
    </div>
    @endif
    @endforeach

    @stop
    @section('select2_js')
    <script type="text/javascript" src="/js/live_search_laravel/select2.js"></script>

    @stop

JS

$(".js-example-basic-multiple").select2({
    minimumInputLength: 3,
    placeholder: 'Search',
    minimumResultsForSearch: 20,


});

Answer 1

select2 的基本原理如下：

$(".js-example-basic-multiple").select2({
    ajax: {
        url: "{{route('route-next')}}",
        dataType: 'json',
        type: "POST",
        data: function (term, page) {
          return {
                type: 'type_of_mine',
                q: term
            };
        },
        results: function (data, page) {
            return { results: data.results };
        }

    },
    initSelection: function (item, callback) {
        var id = item.val();
        var text = item.data('option');
        if(id > 0){
            var data = { id: id, text: text };
            callback(data);
        }
    },
    formatAjaxError:function(a,b,c){return"Not Found .."}
});

顺便说一句，你从select2的基础开始