Estoy trabajando en la implementación de un elemento de búsqueda en vivo de datos dentro de una selección. Actualmente lo tengo para que los resultados de búsqueda en vivo se devuelvan solo si la opción comienza con el término de búsqueda, mediante el uso de: data-live-search-style="startsWith".

Me gustaría que los resultados incluyeran opciones que también solo incluyan el término de búsqueda. Si elimino data-live-search-style="startsWith", veo este comportamiento; sin embargo, quiero que los resultados que coincidan con la condición de inicio con se muestren en la parte superior, de modo que, si es necesario, se muestre dos veces una sola etiqueta de grupo de opciones.

Por ejemplo, supongamos que tengo la siguiente configuración de selección, con una búsqueda de datos en vivo incluida:

 <select id="sp" class="form-control selectpicker" data-live-search="true" data-live-search-style="startsWith" multiple> <optgroup label='Vegetables'> <option value='celery'>Celery</option> <option value='carrot'>Carrot</option> <option value='artichoke'>Artichoke</option> </optgroup> <optgroup label='Fruits'> <option value='cherry'>Cherry</option> <option value='apple'>Apple</option> <option value='papaya'>Papaya</option> </optgroup> </select>

Si el usuario escribe "ch", los resultados de la búsqueda deberían ser Cereza (en la etiqueta del grupo de opciones Frutas) y luego Alcachofa (en la etiqueta del grupo de opciones Verduras). Usar data-live-search-style-"startsWith" significa que actualmente solo veo a Cherry. ¿Hay alguna forma de ordenar por "comienza con" y luego mostrar opciones que "contengan" el término de búsqueda? ¡Gracias!