Include Optgroups (and all children) in Search

[jtfairbank]

I'd like to have a version of live search that shows an optgroup and all its children if the search term matches the optgroup.

This would make working with large data sets that have parent -> child relationships a lot easier. It both shows the context that the optgroup provides, and allows users to filter by it.

For example, a selectpicker with optgroups:

Math
   - Intro
   - Algebra
   - Calculus
   - Number Theory

Science
   - Intro
   - Geology
   - Physics
   - Explosions Lab

Then I search for Math and the following is shown:

Math
   - Intro
   - Algebra
   - Calculus
   - Number Theory

Then I search for Intro and the following is shown:

Math
  - Intro

Science
  - Intro

Then I search for Explosions Lab and the following is shown:

Science
  - Explosions Lab

[jtfairbank]

Btw I checked and I am using the latest release (1.7.3).

[jtfairbank]

I just tried the showSubtext option, and found I can get this functionality by setting the subtext for each option to the optgroup's label. The functionality works as described above, however it adds a lot of repeated text.

[klewin]

+1

[kakoni]

+1

[kakoni]

So as a workaround I use data-tokens. Example:

<select class="selectpicker" multiple data-live-search="true">
  <optgroup label="Condiments">
    <option data-tokens="condiments, mustard">Mustard</option>
    <option data-tokens="condiments, ketchup">Ketchup</option>
    <option data-tokens="condiments, relish">Relish</option>
  </optgroup>
</select>

[m-hagberg]

+1

[avinashn-rapidd]

Can you please suggest, even i have the same requirement

[RandalTeng]

and now, there is any feature to support this issue? search with optgroup's label attribute? i mean not work with data-tokens attribute?

[jimbrew]

and now, there is any feature to support this issue? search with optgroup's label attribute? i mean not work with data-tokens attribute?

Yeah that would be handy especially when using MVC and viewbags to populate dropdowns

[tlranjan]

I am trying to use both data-token and data-subtext, but I am unable to search the group label. <select class="selectpicker" data-live-search="true" data-actions-box="true" multiple> <ng-container *ngFor="let blrareas of bngData['areas']"> <optgroup [attr.label]="blrareas['region']"> <ng-container *ngFor="let pinloc of blrareas['vicinity']"> <option [attr.data-tokens]="blrareas['region']" [attr.data-subtext]="pinloc['localities']">{{pinloc['pincode']}}</option> </ng-container> </optgroup> </ng-container> </select>