Search for the title of the option using selec2

Question

Search for the title of the option using selec2

Navigation

#1 by (1 votes)

4

I have a select element and I need to search the options not only for the text, but also for the title (or any other attribute), I have already been able to put the title to appear when the element expands, but I can not do a search on it.

I'm using the select2 plugin in version 3.5.2

<select id="estado" class="form-control">
    <option value="SP" title="São Paulo">SP</option>    
    <option value="RJ" title="Rio de Janeiro">RJ</option>
    <option value="SC" title="Santa Catarina">SC</option>    
</select>

$("#estado").select2({

    formatResult : function(item) {
        var markup = '<div class="row">' +
             '<div class="col-lg-12">' + item.text + '</div>' +
             '</div>' +
             '<div class="row">' +
             '<div class="col-lg-12 text-muted">' + item.element[0].title + '</div>' +
             '</div>';

          return markup;
    }
});

Follow the example by running on jsfiddle

html-select jquery-select2

asked by anonymous 27.11.2015 / 19:28

1 answer

Image Preload JS + HTML Read a "value" within a "select / select"

score 1 · Accepted Answer

Customize the select2 matcher. Using your example:

$("#estado").select2({

  formatResult : function(item) {
            var markup = '<div class="row">' +
                 '<div class="col-lg-12">' + item.text + '</div>' +
                 '</div>' +
                 '<div class="row">' +
                 '<div class="col-lg-12 text-muted">' + item.element[0].title + '</div>' +
                 '</div>';

              return markup;
  },
  matcher: function(term, text, opt) {
       return text.toUpperCase().indexOf(term.toUpperCase())>=0
           || opt.attr("title").toUpperCase().indexOf(term.toUpperCase())>=0;
  }
});

Fiddle: link