Automatic search for bootstrap-select with jQuery or JavaScript

1.1k Views Asked by At

As you can see on this link there is a bootstrap select box option which allows you to do live search for select box and find the option which you want.

The thing which i want and i don't have is searching on this table automatically with jQuery or JavaScript code.

If you didn't understand what i meant yet, there is an example :

$(".selectpicker").selectpicker('val', "test").selectpicker('refresh');

As you can see this code , this code will change the value of bootstrap select box option and then its will refresh it so select box value will change and the option on it which has value="test" will become selected and the bootstrap select will work well and you can deselect the option.

The thing which i want is search something after we refresh the select box with this code .selectpicker('refresh');.

Do you want to know why do i need something like this ? Because i using bootstrap select on my project and the select box has some options like Select All and when a user choose this option this code will be happen :

$(".selectpicker option").attr("disabled",true);
$(".selectpicker").selectpicker('val', "Select All").selectpicker('refresh');

And after this code happens the option of select box will be disabled and its ok but the problem is the select box have to refresh for showing that all of options disabled because all of them selected already and after refresh happens its will clear the search result and the search input will be still stay in the same thing which user searched in before but its not searching it anymore. And the thing which i want will fix this problem i mean i want to make it search the thing which user searched before after refresh.

The code which i looking for is something like this :

$(".selectpicker").selectpicker('search', "Some words").selectpicker('refresh');

Thanks.

1

There are 1 best solutions below

0
On BEST ANSWER
$(document).on("change","#select-picker",function(){
    $search_value="blob blob";
    $("button[data-id='"+$(this).attr("id")+"']").next().children(".bs-searchbox").children("input[type='search']").val($search_value).trigger('propertychange');
});
// Bootstrap-select v1.13.9