如何实现bootstrap-select刷新后自动执行指定搜索？

I’ve run into this exact quirk with bootstrap-select before—super annoying when the search box keeps text but stops filtering! Here’s a straightforward solution to retain the search functionality after your "Select All" action:

Step-by-Step Implementation #

The core idea is to save the user’s current search keyword first, run your existing disable/refresh logic, then re-trigger the search with the saved keyword to restore filtering.

1. Full Integrated Code (Directly in Your Select All Handler)

// Bind to the select's change event to detect Select All selection
$(".selectpicker").on('changed.bs.select', function(e, clickedIndex) {
  const $picker = $(this);
  const selectedOptionText = $picker.find('option').eq(clickedIndex).text();

  // Check if the selected option is "Select All"
  if (selectedOptionText === "Select All") {
    // 1. Save the current search keyword from the component's search box
    const currentSearch = $picker.siblings('.bs-searchbox').find('input').val().trim();

    // 2. Execute your original disable and refresh logic
    $picker.find('option').attr("disabled", true);
    $picker.selectpicker('val', "Select All").selectpicker('refresh');

    // 3. Restore search filtering if there was an active search keyword
    if (currentSearch) {
      $picker.selectpicker('search', currentSearch);
    }
  }
});

2. Key Details Explained

• Saving the Search Keyword: Bootstrap-select renders its search box as a sibling element with the class .bs-searchbox, so we target that to grab the user’s existing input.
• Re-triggering Search: After calling selectpicker('refresh'), the component resets its internal filter state. Calling selectpicker('search', currentSearch) forces it to re-apply the filter using the saved text, matching the user’s original search context.
• Edge Case Handling: We only trigger the search if there’s an actual keyword, so empty search boxes won’t cause unnecessary component updates.

Important Notes #

• Double-check that your "Select All" option’s text exactly matches "Select All" (adjust the string if you use a different label like "Select Everything").
• If you’re using a custom bootstrap-select theme or modified search box structure, tweak the selector for the search input to match your DOM.
• This works with most recent versions of bootstrap-select (v1.13.x and later).

内容的提问来源于stack exchange，提问作者user12914956