Conceal Choices During Search using jQuery Select2

Question

Conceal Choices During Search using jQuery Select2

I'm having trouble figuring out how to make the Select2 plugin work for my specific color selection feature.

My goal is to allow users to choose 5 colors from a list, including an "Other" option. When the user selects "Other", they should be able to pick a custom color using a color picker. To achieve this, I created 5 options all named "Other" so that users can select it multiple times if needed. However, I am facing issues with hiding the "Other" options that are not the first one displayed when users search for a color.

I've tried using the following code snippet to show/hide the "Other" options:

$('.multi-select').select2('misc options').on("select2:open", function () {
    $('.select2-results__option[aria-selected="false"]:contains("Other"):not(:eq(0))').hide();
    $('.select2-results__option[aria-selected="false"]:contains("Other"):eq(0)').show();
});

However, binding the same function to the search input element causes erratic flashing of elements and the top "Other" option floating above the select object. This flashing occurs due to conflicting event bindings within the plugin.

I have attempted various solutions such as modifying CSS selectors and applying classes to the <li></li> elements created by Select2, but none have been successful.

jquery css jquery-select2

Answer 1

Answer №1

If you want to achieve your desired result without modifying the "Other" option, a combination of the select2:select event and the maximumSelectionLength options would be more suitable.

To start, include a default list of colors in your markup along with an "Other" option:

<select multiple="multiple">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
  <option value="custom">Other</option>
</select>

The value for the "Other" option can be set as custom, serving as the flag option to trigger the display of the color picker when selected.

To limit selections to five colors using Select2, initialize it with the maximumSelectionLength option set to 5. Refer to the documentation for an example.

var $element = $("select").select2({
  maximumSelectionSize: 5
});

Next, implement the color picker functionality by detecting the selection of the "Other" option through the select2:select event.

$element.on("select2:select", function (evt) {
  // handle the "Other" option
});

Specifically check for the selection of the "Other" option based on the data passed in and unselect it immediately to allow picking additional custom colors.

function (evt) {
  if (evt.params.data.id === 'custom') {
    evt.params.data.element.selected = false;
    $(this).trigger('change');
  }
}

Proceed with selecting a color, either by using a synchronous prompt or any asynchronous color picker method. Create a custom <option selected> for the chosen color to update the selection.

var color = prompt("Pick a color, any color");
var option = new Option(color, color, null, true);
$(option).insertBefore(evt.params.data.element);
$element.trigger('change');

Now, Select2 will display the newly selected custom color alongside other choices, allowing users to pick multiple custom colors by selecting the "Other" option multiple times.

Combining these steps provides you with the complete solution. You can test the code live on this jsbin link: http://jsbin.com/beluximesi/1/edit?html,js,output

Answer 2

If you want to achieve your desired result without modifying the "Other" option, a combination of the select2:select event and the maximumSelectionLength options would be more suitable.

To start, include a default list of colors in your markup along with an "Other" option:

<select multiple="multiple">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
  <option value="custom">Other</option>
</select>

The value for the "Other" option can be set as custom, serving as the flag option to trigger the display of the color picker when selected.

To limit selections to five colors using Select2, initialize it with the maximumSelectionLength option set to 5. Refer to the documentation for an example.

var $element = $("select").select2({
  maximumSelectionSize: 5
});

Next, implement the color picker functionality by detecting the selection of the "Other" option through the select2:select event.

$element.on("select2:select", function (evt) {
  // handle the "Other" option
});

Specifically check for the selection of the "Other" option based on the data passed in and unselect it immediately to allow picking additional custom colors.

function (evt) {
  if (evt.params.data.id === 'custom') {
    evt.params.data.element.selected = false;
    $(this).trigger('change');
  }
}

Proceed with selecting a color, either by using a synchronous prompt or any asynchronous color picker method. Create a custom <option selected> for the chosen color to update the selection.

var color = prompt("Pick a color, any color");
var option = new Option(color, color, null, true);
$(option).insertBefore(evt.params.data.element);
$element.trigger('change');

Now, Select2 will display the newly selected custom color alongside other choices, allowing users to pick multiple custom colors by selecting the "Other" option multiple times.

Combining these steps provides you with the complete solution. You can test the code live on this jsbin link: http://jsbin.com/beluximesi/1/edit?html,js,output

Answer 3

Answer №2

The solution dawned on me. By utilizing the field values as unique identifiers in the backend, I cleverly appended "-other-color" to create a specific CSS selector and eliminate the annoying flickering issue.

.select2-results__options li[id*="-other-color"][aria-selected="false"] ~ li[id*="-other-color"][aria-selected="false"]{
    display:none!important;
}

Considering the list contains more than just color options, employing the tilde selector was essential for targeting elements following the specified attributes.

Answer 4

The solution dawned on me. By utilizing the field values as unique identifiers in the backend, I cleverly appended "-other-color" to create a specific CSS selector and eliminate the annoying flickering issue.

.select2-results__options li[id*="-other-color"][aria-selected="false"] ~ li[id*="-other-color"][aria-selected="false"]{
    display:none!important;
}

Considering the list contains more than just color options, employing the tilde selector was essential for targeting elements following the specified attributes.

Conceal Choices During Search using jQuery Select2

Answer №1

Answer №2

Similar questions

Issue with jquery-scrollify causing overflow content to display incorrectly. Overlapping content and inconsistent behavior across varying page widths

The material icons CDN does not seem to be functioning properly in Next.js

I am attempting to dynamically align the images of two articles. The exact heights of the containers are not specified. Can anyone provide guidance on how to achieve this?

Setting the second tab as the primary active tab

Determine the height using jQuery before adding the class

Show the textbox automatically when the checkbox is selected, otherwise keep the textbox hidden

Guide to utilizing vh units in place of pixels for .scrolltop functionalities

I'm having trouble getting things to line up properly in Bootstrap5. Can anyone help me figure out why?

Issue retrieving Select2 tag values from view to controller in ASP.NET MVC 5

IE/Firefox returning empty value for Ajax requests

Issue with jQuery connected sortable: clicking to move items is not functioning properly

Fire an event in JavaScript from a different script file

Node.js's HTML parsing capabilities on the server side

The ellipsis text-overflow feature occasionally malfunctions during a single session when using IE 11

Create a one-of-a-kind SVG design with a customized blur effect in

What is the best way to incorporate a function within a $.click (jquery) event that utilizes an id directly from the clicked element?

Can a CSS3 filter be utilized to transform gradient colors into solid colors?

What's preventing my code from running the CSS class properly?

My React component seems to be unable to locate and process my CSS file

Adding multiple classes with jQuery and activating them using other jQuery functions