web-dev-qa-db-fra.com

Select2 autocomplete by valeur d'option

J'ai essayé d'intégrer tag/autocomplete pour mon site. Son travail à travers l'option texte. Je suis presque proche du résultat mais toujours en suspens.

Maintenant, lorsque vous essayez de sélectionner un texte d'option, un texte apparenté apparaîtra. Mais maintenant, je veux apparaître kathmandu ou la recherche de texte d'option associée via la valeur d'option également.

Ex: Lorsque nous rechercherons la valeur a001 kathmandu apparaîtra et sélectionnera la même chose que a002 il apparaîtra pokhara 

$("select").select2({
  tags: "true",
  placeholder: "Select an option",
  allowClear: true,
  width: '100%',
  createTag: function (params) {
    var term = $.trim(params.term);

    if (term === '') {
      return null;
    }

    return {
     id: term,
     text: term,
     value: true // add additional parameters
    }
  }
});
.select2-container {
  max-width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="custom-select"  multiple="multiple">
  <option value="a001">Kathmandu</option>
  <option value="a002">Pokhara</option>
  <option value="a003">Lalitpur</option>
</select>

Je pense que je suis proche après la recherche via la valeur et cliquez dessus, il montrera une option pertinente avec id. Mais je ne veux que du texte d’option comme pokhara kathmandu pas un identifiant dans une zone sélectionnée. 

javascriptjquerycssjquery-select2select2
7
Kumar

Pour supprimer les doublons de la Id et de la Text qui apparaissent uniquement lorsque vous entrez la Id, vérifiez si le terme saisi correspond à une Id existante et si elle renvoie simplement la Text de l'option correspondante:

options = [];

// create an array of select options for a lookup
$('.custom-select option').each(function(idx) {
    options.Push({id: $(this).val(), text: $(this).text()});
});


$("select").select2({
  tags: "true",
  placeholder: "Select an option",
  allowClear: true,
  width: '100%',
  createTag: function (params) {
    var term = $.trim(params.term);

    if (term === '') {
      return null;
    }
    
    // check whether the term matches an id
    var search = $.grep(options, function( n, i ) {
      return ( n.id === term || n.text === term); // check against id and text
    });
    
    // if a match is found replace the term with the options' text
    if (search.length) 
      term = search[0].text;
    else
      return null; // didn't match id or text value so don't add it to selection
    
    return {
     id: term,
     text: term,
     value: true // add additional parameters
    }
  }
});

$('select').on('select2:select', function (evt) {
  //console.log(evt);
  //return false;
});
.select2-container {
  max-width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="custom-select"  multiple="multiple">
  <option value="a001">Kathmandu</option>
  <option value="a002">Pokhara</option>
  <option value="a003">Lalitpur</option>
</select>

6
K Scandrett

si vous recherchez a001, alors la sortie est l'identifiant d'affichage et le texte à la fois dans la sortie. En savoir placeholder . 

Si la valeur est un objet, il doit être compatible avec Les objets internes de Select2. L'identifiant doit être l'identifiant à rechercher quand déterminer si le paramètre fictif doit être affiché. Le texte devrait être l'espace réservé à afficher lorsque cette option est sélectionnée.

Exemple: recherchez a001 après avoir entré l'affichage kathmandu et a001 dans textbox

utilisantplaceholderdans select2

placeholder: {
        id: "-1",
        text: "Select an option",
      } 


$("select").select2({
  tags: "true",
  placeholder: {
    id: "-1",
    text: "Select an option",
  }, 
  allowClear: true,
  width: '100%',
  createTag: function(params) {
    var term = $.trim(params.term);

    if (term === '') {
      return null;
    }

    return {
      id: term,
      text: term,
      value: true // add additional parameters
    }
  }
});
.select2-container {
  max-width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<select class="custom-select" multiple="multiple">
  <option value="a001">Kathmandu</option>
  <option value="a002">Pokhara</option>
  <option value="a003">Lalitpur</option>
</select>

1
Sumit patel