Priority ordering for data-live-search in selectpicker?

Question

I am working on implementing a data-live-search element within a select. I currently have it so that the live search results are returned only if the option startsWith the search term, through usage of: data-live-search-style="startsWith".

I would like to have the results include options that also just include the search term. If I remove the data-live-search-style="startsWith", I see this behavior; however, I want results that match the startsWith condition to be displayed at the top, such that if it is necessary, a single optgroup label will display twice.

For example, suppose I have the following select set up, with a data-live-search included:

<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>

If the user types in "ch", the search results should be Cherry (under Fruits optgroup label) and then Artichoke (under Vegetables optgroup label). Using data-live-search-style-"startsWith" means that I currently only see Cherry. Is there any way to order by "startsWith", and then display options that "contain" the search term? Thanks!

Answer 1

I think you can apply select2 plugin for that situation.