Laravel 中的实时过滤器

Question

我有一个如下所示的表格。 我有三个“白色”下拉列表来过滤设备注册标签下拉列表的值（具有设备注册标签标签的下拉输入字段的值只有在用户选择三个“白色”下拉列表的值后才会出现）。因此，设备注册标签值将根据“白色”下拉列表值而有所不同。

我希望它是一个实时过滤器，每次用户选择“白色”下拉值时，下拉选项都会立即更改。目前，我的方法是在“白色”下拉列表中使用onchange=" this.form.submit()" 属性并在过滤后返回值，但我意识到这种方法有一个缺点，即用户在更改“白色”的值时可能会不小心提交表单“下拉菜单。如何防止这种情况，只允许用户通过单击保存按钮提交表单？

    $this->Calibration_Location = $request->get('selected_location');
    $this->Calibration_Category = $request->get('selected_category');
    $this->categories = Equipment::select('Category')->distinct()->get()->toArray();
    $this->locations = Equipment::select('Location')->distinct()->get()->toArray();
    $matchThese = ['Category' => $this->Calibration_Category, 'Location' => $this->Calibration_Location];
    $this->Registration_Select_Tags = Equipment::select('Registration Tag')->distinct()->where($matchThese)->get();

我也试过jQuery，但只能通过指定的下拉字段触发，不能触发。

<script type="text/javascript">
        $(document).ready(function() {
            var location, category
            $('#selected_transfer_location').change(function() {
                location = $(this).val();
                console.log(location);
                $('#selected_transfer_category').change(function() {
                    category = $(this).val();
                    console.log(category);
                });

                // $('#transfer_registration_tag').find('option').not(':first').remove();

                $.ajax({
                    url: 'Transaction/' + location + '/' + category,
                    type: 'get',
                    dataType: 'json',
                    success: function(response) {
                        var len = 0;
                        if (response.data != null) {
                            len = response.data.length;
                        }

                        if (len > 0) {
                            for (var i = 0; i < len; i++) {
                                var id = response.data[i]['Registration Tag'];
                                var name = response.data[i]['Registration Tag'];

                                var option = "<option value='" + id + "'>" + name +
                                    "</option>";

                                $("#transfer_registration_tag").append(option);
                            }
                        }
                    }
                })
            });

        });

    </script>

我希望我的问题很清楚，对 Laravel 来说还是个新手，希望能从你那里得到一些提示。

Answer 1

第一种方法可能是，您使用调用 ajax 查询来更改它们中的每一个并获取过滤后的结果。像这样的：

$('#dropdown1, #dropdown2, #dropdown3').change(function(){
    var val1 = $('#dropdown1').val();
    var val2 = $('#dropdown2').val();
    var val3 = $('#dropdown3').val();

    //And then your ajax call here to fetch filtered results.
});

唯一的问题是这个 Ajax 调用至少会发生 3 次，每个调用一次。

第二种方法是在这些下拉列表下方提供小按钮，例如 FetchTags。当用户选择所有 3 个值时，将单击该按钮并调用该 btn 的 ajax onClick。这样您的 Ajax 只会被调用一次。

Answer 2

您可以使用livewire 来执行此操作。这很容易。 要安装它，您必须通过点击以下命令来使用 composer： composer req livewire/livewire

请查看本教程以了解如何使用框架执行您想要执行的操作。