Different Options and Display Text in Bootstrap Select Dropdowns

[kazdouf]

Feature Request: Custom Value and Display Text in Bootstrap Select Dropdowns

Description

I'd like to request a new feature for Bootstrap's select dropdown component. Currently, the select dropdown allows us to display text options, but it would be incredibly helpful to have the ability to customize the values, separate from the display text. This feature would provide more flexibility in styling and interaction, as well as improve accessibility.

Is your feature request related to a problem? Please describe.

In my recent projects, I've faced a common challenge where I want to style Bootstrap select dropdowns in a highly customized way, often an HTML span, or additional elements. However, I also need to ensure that the selected value doesn't have the HTML modification. The current limitation of Bootstrap's select component not only hampers the visual presentation of both the input value and the dropdown results but also necessitates a compromise between achieving an aesthetically pleasing design.

Describe the solution you'd like
While working with Bootstrap's select component, I explored alternative approaches to overcome the limitation of having to compromise between visual presentation and data integrity. One alternative that I have considered involves the implementation of a function that takes the server's result as a parameter and returns an object. This object would allow developers to specify what they want to be displayed as the value within the dropdown items as HTML and define the format of the text to be shown in the input when an option is selected.
$('#autoComplete').autoComplete({ resolverSettings : { url : rest_url+"/getFromServer" }, minLength:1, dropdownFormat: function (serverResult) { // Logic to format the server result and return an object return { value: 'a', // The value to be submitted label: 'Apple<span>🍎</span>', // The HTML content for the dropdown item displayText: 'Apple' // The text to display in the input field }; } });