xcash / bootstrap-autocomplete

Bootstrap Autocomplete
MIT License
168 stars 72 forks source link

"Searching" indicator #148

Open francisjervis opened 1 year ago

francisjervis commented 1 year ago

Is your feature request related to a problem? Please describe. Users type inputs that are too long to effectively match, leading to "no results" being shown when a shorter query would have supplied the expected results. Users cannot tell there is a typeahead function on the search box because there is no "searching" indicator.

Describe the solution you'd like Add a spinner or other indicator to the input, which is shown while results are being retrieved. Add a "searchIndicator" option to the options to turn it off if desired.

Describe alternatives you've considered Write custom handlers implementing this. However this seems to be a universal UX pattern for autocomplete/typeahead elements, so it should be an "out of the box" option.

Additional context Here's an example (thanks Codex!)

$('.advancedAutoComplete').autoComplete({
    resolver: 'custom',
    events: {
        search: function (qry, callback) {
            // let's do a custom ajax call
            var $this = $(this);
            var $thisGroup = $this.closest('.input-group');
            var $thisSpinner = $('<span class="input-group-addon"><i class="spinner-border spinner-border-sm"></i></span>');

            $thisGroup.append($thisSpinner);
            $.ajax(
                '<url>',
                {
                    data: { 'qry': qry}
                }
            ).done(function (res) {
                callback(res.results)

            $thisSpinner.remove();
            });
        }
    }
});