Des informations supplémentaires ci-dessous le texte principal sur l'option de sélection

Question

J'ai utilisé select2 pour produire ma liste d'options de sélection comme l'extrait ci-dessous.

$(function(){ 
 
    $(".select2").select2(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet"/> 
 

 
<div class="form-group"> 
 
    <label>Minimal</label> 
 
    <select class="form-control select2" style="width: 100%;"> 
 
     <option selected="selected">Alabama</option> 
 
     <option>Alaska</option> 
 
     <option>California</option> 
 
     <option>Delaware</option> 
 
     <option>Tennessee</option> 
 
     <option>Texas</option> 
 
     <option>Washington</option> 
 
    </select> 
 
</div> 
 
     
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

Ce que je veux, un sous-texte ci-dessous le texte principal que des recherches aussi. quand je veux rechercher l'option avec la valeur Alabama, j'ai juste besoin de taper Okay1, mais d'autre part je veux rechercher avec la valeur Alabama seulement. Existe-t-il des plugins autres que la bibliothèque d'options select2 prenant en charge ce type de comportement? (Ci-dessous l'image que j'attendais pour le résultat)

J'ai essayé comme le code ci-dessous, mais il ne fonctionne pas bien:

<div class="form-group"> 
    <label>Minimal</label> 
    <select class="form-control select2" style="width: 100%;"> 
     <option selected="selected">Alabama&nbsp&nbsp<h4 style="color: grey">Okay1</h4></option> 
     <option>Alaska&nbsp&nbsp<h4 style="color: grey">Okay2</h4></option> 
     <option>California&nbsp&nbsp<h4 style="color: grey">Okay2</h4></option> 
     <option>Delaware&nbsp&nbsp<h4 style="color: grey">Okay3</h4></option> 
     <option>Tennessee&nbsp&nbsp<h4 style="color: grey">Okay4</h4></option> 
     <option>Texas&nbsp&nbsp<h4 style="color: grey">Okay5</h4></option> 
     <option>Washington&nbsp&nbsp<h4 style="color: grey">Okay6</h4></option> 
    </select> 
</div> 

Answer 1

Vous pouvez:

• encode la propriété secondaire comme un attribut de l'élément <option>
• utiliser un custom search fonction, voir matchCustom dans l'extrait ci-dessous
• utiliser une fonction custom formatter, voir formatCustom ci-dessous

Exemple de travail, en utilisant mots d'ordre de l'Etat comme attribut secondaire stocké dans data-foo, vous pouvez effectuer une recherche par nom ou devise état:

$(function(){ 
 
    $(".select2").select2({ 
 
     matcher: matchCustom, 
 
     templateResult: formatCustom 
 
    }); 
 
}) 
 

 
function stringMatch(term, candidate) { 
 
    return candidate && candidate.toLowerCase().indexOf(term.toLowerCase()) >= 0; 
 
} 
 

 
function matchCustom(params, data) { 
 
    // If there are no search terms, return all of the data 
 
    if ($.trim(params.term) === '') { 
 
     return data; 
 
    } 
 
    // Do not display the item if there is no 'text' property 
 
    if (typeof data.text === 'undefined') { 
 
     return null; 
 
    } 
 
    // Match text of option 
 
    if (stringMatch(params.term, data.text)) { 
 
     return data; 
 
    } 
 
    // Match attribute "data-foo" of option 
 
    if (stringMatch(params.term, $(data.element).attr('data-foo'))) { 
 
     return data; 
 
    } 
 
    // Return `null` if the term should not be displayed 
 
    return null; 
 
} 
 

 
function formatCustom(state) { 
 
    return $(
 
     '<div><div>' + state.text + '</div><div class="foo">' 
 
      + $(state.element).attr('data-foo') 
 
      + '</div></div>' 
 
    ); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet"/> 
 
<style> 
 
.foo { color: #808080; text-size: smaller; } 
 
</style> 
 

 
<div class="form-group"> 
 
    <label>Minimal</label> 
 
    <select class="form-control select2" style="width: 100%;"> 
 
     <option selected="selected" data-foo="We dare to defend our rights">Alabama</option> 
 
     <option data-foo="North to the Future">Alaska</option> 
 
     <option data-foo="Eureka">California</option> 
 
     <option data-foo="Liberty and Independence">Delaware</option> 
 
     <option data-foo="Agriculture and Commerce">Tennessee</option> 
 
     <option data-foo="Friendship">Texas</option> 
 
     <option data-foo="Bye and bye">Washington</option> 
 
    </select> 
 
</div> 
 
     
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

Answer 2

J'utiliser Bootstrap-select. C'est une bibliothèque géniale et fait déjà tout ce que vous voulez. Pas besoin de réinventer la roue comme on dit!

Vous pouvez effectuer une recherche à la fois sur le titre et sur la description.

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="form-group "> 
       <label>Minimal</label> 
       <select class="selectpicker form-control" data-live-search="true" title="Search title or description..."> 
        <option data-subtext="description 1">Alaska</option> 
        <option data-subtext="description 2">California</option> 
        <option data-subtext="description 3">Delaware</option> 
        <option data-subtext="description 4">Tennessee</option> 
        <option data-subtext="description 5">Texas</option> 
        <option data-subtext="description 6">Washington</option> 
       </select> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.dropdown-menu > li > a { 
    font-weight: 700; 
    padding: 10px 20px; 
} 

.bootstrap-select.btn-group .dropdown-menu li small { 
    display: block; 
    padding: 6px 0 0 0; 
    font-weight: 100; 
} 

Here is a fiddle with a little bit of customisation