Chosen jQuery插件需求：搜索时始终显示“Other”默认选项

Great question! I’ve dealt with exactly this scenario using Chosen before, and the key is overriding Chosen’s default search filtering logic to force the "Other" option to stay in the results no matter what the user types. Here's a step-by-step solution:

1. Set Up Your HTML Structure #

First, create your select element with the "Other" option, plus a hidden input field that will show when "Other" is selected:

<select id="custom-select" class="chosen-select">
  <option value="option-a">Marketing</option>
  <option value="option-b">Engineering</option>
  <option value="option-c">Design</option>
  <option value="other">Other</option>
</select>

<input 
  type="text" 
  id="other-custom-input" 
  placeholder="Enter your custom option" 
  style="display: none; margin-top: 8px;"
/>

2. Override Chosen's Search Filter #

Chosen uses an internal method called search_results_filter to filter options based on the user’s search query. We’ll override this method to run the original filtering, then add the "Other" option back if it was filtered out:

// Initialize Chosen as usual
const $select = $('#custom-select').chosen({
  width: '300px',
  placeholder_text_single: 'Select an option'
});

// Grab the underlying Chosen instance
const chosenInstance = $select.data('chosen');

// Store the original filter method so we can still use it
const originalFilter = chosenInstance.search_results_filter;

// Replace the filter with our custom logic
chosenInstance.search_results_filter = function() {
  // Run Chosen's default filtering first
  originalFilter.call(this);

  // Locate the "Other" option in the original select element
  const otherOption = this.form_field.querySelector('option[value="other"]');
  if (!otherOption) return;

  // Check if "Other" is already present in the filtered results
  let isOtherInResults = false;
  this.search_results.find('li').each(function() {
    if ($(this).data('option-array-index') === otherOption.index) {
      isOtherInResults = true;
      return false; // Exit the loop early if found
    }
  });

  // If "Other" isn't in the results, add it back
  if (!isOtherInResults) {
    // Use Chosen's internal method to create a consistent result item
    const otherResultItem = $(this.result_add_option(otherOption));
    this.search_results.append(otherResultItem);
    // Trigger an update to make sure the results container adjusts correctly
    this.search_results.trigger('chosen:updated');
  }
};

3. Show/Hide the Custom Input #

Add a change handler to show the input field when "Other" is selected, and hide it when another option is chosen:

$('#custom-select').on('change', function() {
  const $input = $('#other-custom-input');
  if ($(this).val() === 'other') {
    $input.show();
    $input.focus(); // Optional: Auto-focus the input for better UX
  } else {
    $input.hide();
    $input.val(''); // Clear the input when switching away
  }
});

How This Works #

• We don’t completely replace Chosen’s filtering—we still use the original logic to show matching options, then ensure "Other" is always included.
• Using Chosen’s own result_add_option method ensures the "Other" result matches the styling of all other options in the dropdown.
• The chosen:updated trigger makes sure the dropdown’s height adjusts correctly when we add the "Other" option dynamically.

Notes #

• If your "Other" option uses a different value (not "other"), make sure to update the selectors in the JavaScript code to match.
• If you’re working with a multiple-select Chosen, you’ll need to adjust the logic slightly, but the core idea of overriding the filter remains the same.

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