In Bootstrap 5.2.3 Ajax-Bootstrap-Select doesn't work

[mattymatty76]

Hi everybody, unfortunately I'm testing bootstrap 5 with ajax select but it doesn't work. I have used the bootstrap-select 1.14.0-beta3 that works with bootstrap 5 without problem, in a simple/classic select, but when I attempt to use ajax-select (that uses bootstrap-select 1.14.0-beta3) the result is not reliable: as the result list has a strange behavior, for example if you want to chose more than one element, you can't despite multi selection is enabled; moreover when you click dropdown-button to open it and soon after close it, the library sets a list of separator inside of the select.

Thank you very much for the library very usefull and admirable, reason why I would continue to use it.

[mattymatty76]

I noticed that when I load an element in the ajax-select, and after loading it a second time (same identical item) the ajax-select adds it like a new item and so on repeating the element: the correct behavior should be that if the element is previus loaded the library hasn't to load it anymore...

PS: I don't expect anyone to fix it, I'm just saying this for clarity and transparency... thank you

[dolrichfortich]

This is a bug on the bootrap-select script. The fix here is working fine for me. https://github.com/snapappointments/bootstrap-select/issues/2738#issuecomment-1119004299

[JuanLlanso]

The fix almost work, but there is still a issue. When you select another item in the loaded list, if the item is below there is no problem, but if the item is above, the text of the selected item doesn't change.

[dolrichfortich]

I had issue with multiple items being selected, not sure if will fix with the issue you have.

$('#selector')
  .selectpicker()
  .ajaxSelectPicker({
    ajax: {
      url: '/ajax_search',
    },
    locale: {
      emptyTitle: 'Search...'
    },
    preserveSelected : false
  });

//Added the code below
$('#selector').on('shown.bs.select', function() {
  $('#selector').selectpicker('val', '');
});

[JuanLlanso]

No, it doesn't work, but what works is to change preserveSelected to true. The selected item is shown in a different line/section but it works fine that way.

[dolrichfortich]

Thank you for that, selection is working fine without the added code.

[JuanLlanso]

I like it more with the preserveSelected to true because in my case it separates the options from the one that is selected, but this depends on the use you are giving to the control. Without that it doesn't work when you select an option that is above the current selection.

[mattymatty76]

Hello guys, I have fixed the issue, now ajaxselect works well, at least for me and for the test that I have done.

https://github.com/snapappointments/bootstrap-select/issues/2830