davidstutz / bootstrap-multiselect

JQuery multiselect plugin based on Twitter Bootstrap.
https://davidstutz.github.io/bootstrap-multiselect/
Other
3.66k stars 1.99k forks source link

Using Dataprovider, filter returning empty results when there are none in the data set #1263

Closed dustin-lennon closed 1 year ago

dustin-lennon commented 1 year ago

I am pulling JSON in from a MySQL query that returns over 11k results that is to be placed in a multiselect. When filtering through the results, it returns values that are empty which are not in the original dataset. I am unsure if I am doing something wrong, or there is a legitimate bug. After the screenshot, I have included the JS that pulls the data.

See the screenshot below image

                $.ajax({
                    method: 'GET',
                    data: {
                        request: 'getClients'
                    },
                    success: function (response) {
                        const len = response.length;
                        let data = [];

                        // Initialize the multiselect
                        const selectConfig = {
                            includeSelectAllOption: true,
                            nonSelectedText: 'Select Client',
                            buttonContainer: '<div class="btn-group w-100" />',
                            enableFiltering: true,
                            enableCaseInsensitiveFiltering: true,
                            enableResetButton: true,
                            maxHeight: 200,
                            templates: {
                                filter: '<div class="multiselect-filter"><div class="input-group input-group-sm p-1"><div class="input-group-prepend"><i class="input-group-text fas fa-search"></i></div><input class="form-control multiselect-search" type="text" /><div class="input-group-append"><button class="multiselect-clear-filter input-group-text" type="button"><i class="fas fa-times"></i></button></div></div></div>'
                            },
                            buttonTextAlignment: 'left'
                        };

                        $('#client').multiselect(selectConfig);

                        // Add data to client select
                        for (let i = 0; i < len; i++) {
                            let id = response[i].id;
                            let name = response[i].name;

                            data.push({
                                label: name,
                                title: name,
                                value: id
                            });
                        }

                        $('#client').multiselect('dataprovider', data);
                        $('#client').multiselect('rebuild');
                    }
                });

I want to also include that I found this behavior with not only using the dataprovider, but also in a situation where I used PHP to generate the options in the select. There are 632 options in this select and using the filter does the same thing.

dustin-lennon commented 1 year ago

I found the issue. All resided in the query