如何使用 Laravel 分页执行 select2 结果无限滚动

Question

我创建了一个 returns 产品数据 json 的函数，我想以无限滚动的方式在 select2 中显示它。目前只能按照分页结果数显示

这是我的控制器：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Str;
use App\Models\Product;

class ReceiveInventoryController extends Controller
{
    public function index(Request $request) {
        return view('receive-inventory.index');
    }

    public function getProducts(Request $request){
        $search = $request->search;
        if($search == ''){
            $products = Product::orderby('name','asc')->select('id','name')->paginate(8);
        } else {
            $products = Product::orderby('name','asc')->select('id','name')->where('name', 'like', '%' .$search . '%')->paginate(8);
        }

        $response = array();
        foreach($products as $product){
            $response[] = array(
                "id" => $product->id,
                "text" => $product->name
            );
        }
        return response()->json($response);
    }
}

这是我的 select2 JS ajax 调用：

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$(document).ready(function () {
    $.noConflict();
    $('#products-list').select2({
        ajax: {
            url: 'receive-inventory/get-products',
            type: 'post',
            dataType: 'json',
            delay: 250,
            data: function(params) {
                var query = {
                    _token: CSRF_TOKEN,
                    search: params.term, // search term
                    page: params.page || 1
                };

                // Query parameters will be ?search=[term]&page=[page]
                return query;
            },
            processResults: function(response) {
                return {
                    results: response
                };
            },
            cache: true
        }
    });
});

我想我已经快找到答案了。就是缺一点东西。

Answer 1

感谢@apokryfos 的帮助！

我通过重构我的 getProducts 函数设法解决了这个问题：

public function getProducts(Request $request, Product $product) {
        $products = $request->search
            ? Product::where('name', 'LIKE', "%$request->search%")
            : new Product();

        return $products->paginate(10, ['*'], 'page', $request->page)->toArray();
}

以及在 Select2 JS 中检索数据：

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$(document).ready(function () {
    $.noConflict();
    $("#products-list").select2({
        ajax: {
            url: "receive-inventory/get-products",
            type: 'POST',
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    _token: CSRF_TOKEN,
                    q: params.term, // search term
                    page: params.current_page
                };
            },
            processResults: function(data, params) {
                params.current_page = params.current_page || 1;

                return {
                    results: data.data,
                    pagination: {
                        more: (params.current_page * 30) < data.total
                    }
                };
            },
            autoWidth: true,
            cache: true
        },
        placeholder: 'Search for a product',
        minimumInputLength: 1,
        templateResult: formatProduct,
        templateSelection: formatProductSelection
    });

    function formatProduct(product) {
        if (product.loading) {
            return product.text;
        }

        var $container = $(
            "<div class='select2-result-product clearfix'>" +
            "<div class='select2-result-product__title'></div>" +
            "<div class='select2-result-product__description'></div>" +
            "</div>" +
            "</div>" +
            "</div>"
        );

        $container.find(".select2-result-product__title").text(product.name);
        $container.find(".select2-result-product__description").text(product.description);

        return $container;
    }

    function formatProductSelection(product) {
        return product.name || product.text;
    }
});

根据以上内容，我已将其格式化为在某些 div 容器上显示产品 name 和 description。您可以格式化数据格式化accdg。满足您的需求。

Answer 2

我没有代表对已接受的答案发表评论，但想说声“谢谢”——这为实施无限滚动节省了大量时间。这是我的 Laravel 路由响应。我使用 when 方法稍微收紧了它。

return \App\Models\User::when(request()->get('q'), function($q) {
    $q->where('name', 'like', '%' . request()->get('q') . '%');
})->orderBy('name')->paginate(10, ['*'], 'page', request()->get('page'));

如何使用 Laravel 分页执行 select2 结果无限滚动

How can I perform a select2 result infinite scroll with Laravel pagination

ajax

laravel

eloquent

pagination

jquery-select2