首页 > 解决方案 > select2 远程搜索在liverwire 中不起作用

问题描述

我正在使用 livewire 和 select2。我有 select2 选项来选择客户。

livewire 刀片是一个引导模式。在模式中有一个 select2 选项来选择客户。

客户正在使用 ajax 功能进行搜索。问题是 ajax 函数在模态中不起作用。

模态如下

<script>
  
    $(document).ready(function () {

        $("#customer_select").select2({

             dropdownParent: '#customerReviewModalId',

            ajax: {
                url: "{{ route('customers.search-customers') }}",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    x = {
                        filter_string: params.term,
                        filter_column: ['first_name', 'email']
                    };
                    return x;
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data,
                        pagination: {
                            more: (params.page * 30) < data.length
                        }
                    };
                },
                cache: true
            },

            placeholder: 'Search Customer',
            theme: "bootstrap",
            escapeMarkup: function (markup) {
                return markup;
            },

            minimumInputLength: 3,
            // templateResult: formatAirport,
            // templateSelection: formatAirportSelection
        });
    });


</script>
<div class="modal fade" id="customerReviewModalId" role="dialog" aria-labelledby="modelTitleId">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Your Reviews</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form enctype="multipart/form-data" wire:submit.prevent="submit">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="customer_select">Customer</label>
                                <select class="form-control" id="customer_select">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="reviewTitle">Title</label>
                                <input type="text" class="form-control" wire:model="title"
                                    aria-describedby="titlehelpId">
                                <small id="helpId" class="form-text text-muted">Your Review Title Add Here</small>
                            </div>
                            <div class="form-group" wire:ignore>
                                <label for="reviewTitle">Image</label>
                                <input type="file" class="form-control dropify" wire:model="image"
                                    aria-describedby="imagehelpId" data-max-file-size="2M" accept="image/*">
                                <small id="imagehelpId" class="form-text text-muted">Add Your Review Image Here</small>
                            </div>
                            <div class="form-group">
                                <label for="reviewTitle">Review</label>
                                <textarea class="form-control" wire:model="review" rows="10"
                                    aria-describedby="reviewhelpId"></textarea>
                                <small id="reviewhelpId" class="form-text text-muted">Add Your Review Here</small>
                                <input type="hidden" wire:model="product_id">
                            </div>
                            <div class="form-group">
                                <label for="">Rating</label>
                                <select class="form-control" wire:model="ratings">
                                    <option value="5">5 Stars</option>
                                    <option value="4">4 Stars</option>
                                    <option value="3">3 Stars</option>
                                    <option value="2">2 Stars</option>
                                    <option value="1">1 Stars</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <button type="submit" class="btn btn-info">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

没有任何控制台错误

标签: laraveljquery-select2laravel-livewire

解决方案


推荐阅读