0

Estou utilizando a biblioteca Select2. Utilizarei para fazer uma busca de páginas de ajuda, porém preciso que ele busque por tags e não somente pelo texto em Option ex:

Hoje:

<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
</optgroup>

Ele busca apenas por Arizona, Colorado, Idaho

Gostaria de algo do tipo:

<optgroup label="Mountain Time Zone">
<option value="AZ" data-tag="Ari, City, USA">Arizona</option>
<option value="CO" data-tag="Col, City, Cores">Colorado</option>
<option value="ID">Idaho</option>
<option value="WY">Wyoming</option>
</optgroup>

Podendo buscar pelas "data-tag" ou qualquer outra forma, porém essas 'tags' não precisariam aparecer no select

2
  • 1
    Já deu uma olhada nesse? harvesthq.github.io/chosen Commented 21/07/2015 às 18:55
  • Agradeço, mas esse infelizmente não tem também a opção de buscar em algum campo e mostrar outro
    – Dorath
    Commented 21/07/2015 às 19:10

1 Resposta 1

1

Para fazer isso, você tem que esconder os options, desativá-los com disabled e depois dar um trigger nos elementos quando for selecioná-los conforme eu fiz nesse exemplo: http://jsfiddle.net/jEADR/1842/

No CSS você esconde os elementos desativados:


<style>.select2-results__option[aria-disabled=true]{ display:none; }</style>

No combobox você coloca abaixo das opções, as tags como opções que você quer chamar só que como disabled:


<select multiple id="e1" class="js-example-tags form-control select2-hidden-accessible" style="width:300px">  
         <option value="01">Opção 1</option>
          <option value="01-01" disabled>tag1</option>
          <option value="01-02" disabled>tag2</option>
          <option value="01-03" disabled>tag3</option>
        <option value="02">Opção 2</option>
          <option value="02-01" disabled>tag4</option>
          <option value="02-02" disabled>tag5</option>
          <option value="02-03" disabled>tag6</option>
        <option value="03">Opção 3</option>
</select>

E no javascript você faz o trigger:


var $element = $("#e1").select2({
    tags:true,
    placeholder: "Selecione os valores",
    tokenSeparators:[',', ' ']
});

$('#e1').on('change', function(){
    if ($(this).val() == '01'){
          $element.val(["01-01", "01-02", "01-03"]).trigger("change");
        }
     if ($(this).val() == '02'){
          $element.val(["02-01", "02-02", "02-03"]).trigger("change");
        }

});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .