Select2, Bootstrap,adminLTE hidden searchable tags

How Do I...
#1

Hi Guys!
So im using ADMINLTE and Select2 i want to have some invisible “tags” that user can search for them in the select are like this:

<div class="form-group">
     <label>Minimal</label>
          <select class="form-control select2" style="width: 100%;">
              <option selected="selected">Alabama</option>
              <option>Alaska <tag hidden>Alias1</tag> <tag hidden>Alias2</tag></option>
              <option>California</option>
              <option>Delaware</option>
              <option>Tennessee</option>
              <option>Texas</option>
              <option>Washington</option>
          </select>
      </div>

This is just a example, could be another way like
<option tags="tag1;tag2">Alaska</option>
So if the user start type Alias1 will show alaska but not the tags.
its a simple form so i load al the options as a html, jo ajax or any fancy stuff.

Any way to make this work?
Thx guys!

#2

Yes, there is. I would recommend you use a data-* attribute (e.g., <option data-tags="tag1;tag2">Alaska</option>, which is the “official” way to include custom data in an HTML element.

Once you have your tags in your <option>s, you will need to write your own Select2 custom matcher function to check for matches not only in each option’s text but also in its tags. I have actually created a demo that does exactly that, although it gets its data from a JavaScript array rather than having it hard-coded in <option> elements. That said, the logic you would need is similar. See the “matchTextAndExtras” function in my demo’s index.js file. Your matcher’s logic would differ from mine in that you would need to reference the value of each option’s “data-tags” attribute. To do this, your matcher callback can access the data.element.dataset.tags property (where “data” is the name of the second parameter passed to your matcher callback; data.element is a reference to the actual HTML <option> element your matcher is inspecting).

Note that my demo has a lot of additional features (such as custom match highlighting and revealing which “extra” data—or “tags”, in your case—match the user’s search term) that you might not need. So don’t get too hung up on all the additional logic in my demo—but do feel free to read through it if you are interested, and copy anything you find useful.

Good luck with your project!

#3

Thx! for the demo and time to explaing.
Will try this!.