Performing a search in Select2 only after all remote data has been loaded

Question

Performing a search in Select2 only after all remote data has been loaded

The select2 feature is functioning almost as desired. It successfully loads all remote data and formats it correctly when another field is changed. However, I am looking to reintroduce the search function for the retrieved data. Specifically, once the data is fetched, I want users to be able to search the list by title (result.title).

In the provided example, the data is retrieved but the search term is not being filtered. It is crucial that all remote data be loaded before requiring users to search for a result.

If it is not possible to enable searching, how can I disable the search box? Even when setting "minimumResultsForSearch: -1", the select2 box still allows me to search?

https://i.sstatic.net/OwOv8.png

    var $company2 = $(".company2");
    $company2.select2().on('change', function() {
        if ($company2.val() !== null) {
            $('.unmaintained2').select2({
                allowClear: true,
                minimumResultsForSearch: 1,
                ajax: {
                    url: "/api/unmaintained2/" + $company2.val(),
                    processResults: function (data) {
                        return {
                            results: data,
                        };
                    },
                    dataType: 'json',
                    cache: true,
                },
                escapeMarkup: function(m) {
                    return m;
                },
                templateResult: function (result) {
                    if (result.loading) return 'Loading...';
                    return result.text + '<h6>' + result.make + ' ' + result.category + '</h6>';
                },
            });
        };
    });

javascript ajax jquery-select2 jquery-select2-4

Answer 1

Answer №1

Discover a feature called matcher for searching. For further details, refer to the documentation

However, this particular feature can only be utilized with locally provided data.

If you are working with remote data, select2 assumes that the data returned is already filtered.

The 'matcher' function exclusively functions with locally supplied data (e.g., through an array)! In cases where remote data sets are used, Select2 anticipates that the returned results have been pre-filtered on the server side.

It appears that using this method with the ajax option may not be viable.

An alternative approach could involve loading the data upon page initialization and subsequently integrating the retrieved data as options into the select box. Following this, the select2 box can be initiated with the matcher option.

UPDATE:

I experimented a bit and found a way to format the search results post loading all options. Take a look at this code:

function formatState (state) {
  if (!state.id) {
    return state.text;
  }
  var state1 = state.text + '<h6>(' + state.id  + ') ' + state.text + '</h6>';
  return state1;
};

function selection(state) {
    return state.text;
}

function makeSelect2(data) {
    $('#selectBox').select2({
        data: data,
        templateSelection: selection,
        templateResult: formatState,
        escapeMarkup: function (state) {
            return state;
        },
    });
}

$(document).ready(function() {
    $.ajax({
        type: "POST",
        dataType: "json",
        async: true,
        url: "ajax.php",
        data: ({ 
        }),
        success: function (data) {
            makeSelect2(data);
        }
    });
});

During $(document).ready, the options are fetched via ajax. Once the ajax call is successful, the function makeSelect2 is invoked with the data received from the ajax request. Within the makeSelect2 function, the select2 box is set up with the specified data and by utilizing the templateSelection and templateResult options, you have the ability to customize the appearance of your search results.

Hoping this aligns with your expectations.

Answer 2

Discover a feature called matcher for searching. For further details, refer to the documentation

However, this particular feature can only be utilized with locally provided data.

If you are working with remote data, select2 assumes that the data returned is already filtered.

The 'matcher' function exclusively functions with locally supplied data (e.g., through an array)! In cases where remote data sets are used, Select2 anticipates that the returned results have been pre-filtered on the server side.

It appears that using this method with the ajax option may not be viable.

An alternative approach could involve loading the data upon page initialization and subsequently integrating the retrieved data as options into the select box. Following this, the select2 box can be initiated with the matcher option.

UPDATE:

I experimented a bit and found a way to format the search results post loading all options. Take a look at this code:

function formatState (state) {
  if (!state.id) {
    return state.text;
  }
  var state1 = state.text + '<h6>(' + state.id  + ') ' + state.text + '</h6>';
  return state1;
};

function selection(state) {
    return state.text;
}

function makeSelect2(data) {
    $('#selectBox').select2({
        data: data,
        templateSelection: selection,
        templateResult: formatState,
        escapeMarkup: function (state) {
            return state;
        },
    });
}

$(document).ready(function() {
    $.ajax({
        type: "POST",
        dataType: "json",
        async: true,
        url: "ajax.php",
        data: ({ 
        }),
        success: function (data) {
            makeSelect2(data);
        }
    });
});

During $(document).ready, the options are fetched via ajax. Once the ajax call is successful, the function makeSelect2 is invoked with the data received from the ajax request. Within the makeSelect2 function, the select2 box is set up with the specified data and by utilizing the templateSelection and templateResult options, you have the ability to customize the appearance of your search results.

Hoping this aligns with your expectations.

Answer 3

Answer №2

Big shoutout to @dns_nx for providing the ultimate solution below! The select2 feature is now fully searchable on the client side and customizable with remote data!

$(document).ready(function() {
    var $company2 = $(".company2");
    var $equipment2 = $(".equipment2");
    $company2.select2().on('change', function() {
        $equipment2.empty();
        if ($company2.val() !== null) {
            $.ajax({
                url: "{{ url('/') }}" + "/api/unmaintained2/" + $company2.val(),
                type: 'GET',
                dataType: 'json',
                async: true,
                success: function(data) {
                    $equipment2.select2({
                        data: data,
                        templateSelection: function(result) {
                            return result.text;
                        },
                        templateResult: function(result) {
                            if (!result.id) {
                                return result.text;
                            }
                            var final = '<h2>'+ result.serial + '</h2><h5>(' + result.make  + ') ' + result.category + '</h5>';
                            return final;
                        },
                        escapeMarkup: function(result) {
                            return result;
                        },
                    });
                }
            });
        }
    }).trigger('change');
});

Answer 4

Big shoutout to @dns_nx for providing the ultimate solution below! The select2 feature is now fully searchable on the client side and customizable with remote data!

$(document).ready(function() {
    var $company2 = $(".company2");
    var $equipment2 = $(".equipment2");
    $company2.select2().on('change', function() {
        $equipment2.empty();
        if ($company2.val() !== null) {
            $.ajax({
                url: "{{ url('/') }}" + "/api/unmaintained2/" + $company2.val(),
                type: 'GET',
                dataType: 'json',
                async: true,
                success: function(data) {
                    $equipment2.select2({
                        data: data,
                        templateSelection: function(result) {
                            return result.text;
                        },
                        templateResult: function(result) {
                            if (!result.id) {
                                return result.text;
                            }
                            var final = '<h2>'+ result.serial + '</h2><h5>(' + result.make  + ') ' + result.category + '</h5>';
                            return final;
                        },
                        escapeMarkup: function(result) {
                            return result;
                        },
                    });
                }
            });
        }
    }).trigger('change');
});

Performing a search in Select2 only after all remote data has been loaded

Answer №1

Answer №2

Similar questions

Challenges with React Native's AsyncStorage

In the realm of JavaScript, removing a DOM element can sometimes feel like an

Implementing TypeScript with styled components using the 'as' prop

Changing the location.hash parameter prior to the page loading

Using the TypeScript compiler API to determine the location in the generated code of a particular AST node

The jQuery functions seem to be malfunctioning when trying to retrieve elements by their ids

How to locate the data-id of the next element in a jQuery list

Tips for formatting a lengthy SQL query in a Node.js application

Can the settings of the Firefox browser be modified using a Vue.js application?

web address ajax search

Issue with Javascript form submission leading to incorrect outcomes

Defending against the onslaught of quick and frequent ajax requests

Display Descriptions Upon Hovering Over Images

UnknownReferenceError: jwreload has not been declared (Exploring dynamic routing in next.js)

javascript: extracting class name from HTML elements

Bidirectional communication between two AngularJS scopes or controllers utilizing a service

Hide the overlay fullscreen menu upon clicking an anchor link

Incorrect positioning on canvas

What should we name this particular style of navigation tab menu?

Upgrade your react-select by replacing the DropdownIndicator with a modern CSS triangle design