Ajax search get multiple calls

[adaniello]

Hi,
i'm trying to use Ajax/JSON data source support as in https://github.com/snapappointments/bootstrap-select/releases/tag/v1.14.0-beta.

No problem if i use source.data property with an ajax call, but when i try to use source.search i get a very strange issue: typing 1 character, selectpicker posts only one ajax call; typing 2 characters, selectpicker posts 2 ajax call; from 3 characters posts so much ajax call, lower is result greather is number of calls (eg. with only two items in result, selectpicker post also 21 ajax call repeating more time result).

This is my JS code:

$(function () {
    $('#test').selectpicker({
        source: {
            data: function (callback) {
                $.ajax({
                    method: 'POST',
                    url: 'test_selectpicker.php',
                    dataType: 'json'
                }).then((response) => callback(response.data))
            },
            search: function (callback, page, searchTerm) {
                let data = { page, search: searchTerm };
                $.ajax({
                    method: 'POST',
                    url: 'test_selectpicker.php', 
                    data,
                    dataType: 'json'
                }).then((response) => callback(response.data))
            }
        }
    });
});

Thanks

[adaniello]

After some debug, i found that fetchData() is the problem, because it is called many times.

There's a a logical issue (i think) in this block

bootstrap-select/js/bootstrap-select.js

Lines 1463 to 1471 in e2425ed

	if ((!isSearching && that.options.source.load || isSearching && that.options.source.search) && currentChunk === chunkCount - 1) {
	that.fetchData(function () {
	that.render();
	that.buildList(size, isSearching);
	that.setPositionData();
	scroll(scrollTop);
	}, isSearching ? 'search' : 'load', currentChunk + 1, isSearching ? that.selectpicker.search.previousValue : undefined);
	}
	}

I tried to comment and works fine!

Another issue found exploring code:

bootstrap-select/js/bootstrap-select.js

Lines 1011 to 1027 in e2425ed

	this.fetchData(function () {
	that.render(true);
	that.buildList();
	requestAnimationFrame(function () {
	that.$element.trigger('loaded' + EVENT_KEY);
	});
	});
	this.fetchData(function () {
	that.render(true);
	that.buildList();
	requestAnimationFrame(function () {
	that.$element.trigger('loaded' + EVENT_KEY);
	});
	});

this block code is repeated two times.

Thanks

[NicolasCARPi]

Thank you for looking into it, indeed it seems weird that this code is repeated two times!

[adaniello]

Hi, this is what happens: when i press only one character bootstrap-select calls ajax request once; with two characters, twice; when i press third character, bootstrap-select calls ajax request 40 times!

My code is very simple:

$(function () {
    $('#test').selectpicker({
        source: {
            search: function (callback, page, searchTerm) {
                let data = { page, search: searchTerm };
                $.ajax({
                    method: 'POST',
                    url: 'test_selectpicker.php',
                    data,
                    dataType: 'json'
                }).then((response) => callback(response.data))
            }
        }
    });
});

Anyone can help me to fix this issue?
Thanks

[caseyjhol]

Investigating. Looks like this is only happening if the number of options is less than or equal to chunkSize (which defaults to 40). In most of my testing I was using larger data sets, which is how this got overlooked. Hoping to have a fix soon.