autoriser de nouvelles valeurs avec la sélection multiple de chosen.js

Question

J'utilise le plugin chosen.js. http://harvesthq.github.com/chosen/ avec jQuery pour permettre à l'utilisateur de sélectionner plusieurs options dans une sélection. Cependant, je souhaite maintenant pouvoir lui permettre de créer qui ne sont pas déjà présentes - une idée sur la manière de procéder ?

EDIT : quelque chose de similaire à la barre de sélection/création de balises de SO serait proche de ce que je recherche.

De préférence sans modifier ou éditer le plugin, mais cela peut se faire si nécessaire.

Le code : HTML :

<p>Select something</p>
<select name="theSelect[]" multiple="multiple">
    <option value="First Option">First Option</option>
    <option value="Second Option">Second Option</option>
</select>

Javascript :

$(function(){
    $('select').chosen();
});

Ainsi, si un utilisateur tape "Troisième option", j'aimerais l'ajouter à la liste et la faire sélectionner. La valeur et le nom d'affichage sont/seront les mêmes, donc ce n'est pas un problème.

Answer 1

Selon la documentation, vous pouvez essayer de faire quelque chose comme ceci :

$('select').append('<option>test</option>');
$('select').trigger('liszt:updated');

Comme Tony l'a déclaré dans les commentaires ci-dessous :

"A partir de la version 1.0 dont le déclencheur est maintenant "chosen:updated". Voir harvesthq.github.io/chosen/#change-update-events "

Answer 2

Je suis tombé sur ce site en cherchant les mêmes idées. Il semble que ce soit une demande de fonctionnalité assez populaire, et quelques forks l'ont implémentée. Il semble qu'elle sera fusionnée dans la branche principale assez rapidement.

+1 pour ce tirage particulier qui a fonctionné à merveille : https://github.com/harvesthq/chosen/pull/166

Vous pouvez voir la fourchette de Koenpunt ici : https://github.com/koenpunt/chosen

Answer 3

Voici une méthode simple que j'ai utilisée :

$(".search-field").find("input").live( "keydown", function (evt) {
    var stroke;
    stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
    if (stroke == 9) { // 9 = tab key
        $('#tags').append('<option value="' + $(this).val() + '" selected="selected">' + $(this).val() + '</option>');
        $('#tags').trigger('chosen:updated');
    }
});

Answer 4

J'essayais justement de résoudre le même problème. J'ai fini par modifier un peu le code source. Voici la nouvelle fonction keyup_checker. Jetez un coup d'oeil au cas 13 :

AbstractChosen.prototype.keyup_checker = function(evt) {
  var stroke, _ref;
  stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
  this.search_field_scale();
  switch (stroke) {
    case 8:
      if (this.is_multiple && this.backstroke_length < 1 && this.choices > 0) {
        return this.keydown_backstroke();
      } else if (!this.pending_backstroke) {
        this.result_clear_highlight();
        return this.results_search();
      }
      break;
    case 13:
      evt.preventDefault();
      if (this.results_showing) {
        if (!this.is_multiple || this.result_highlight) {
          return this.result_select(evt);
        }  

        $(this.form_field).append('<option>' + $(evt.target).val() + '</option>');
        $(this.form_field).trigger('liszt:updated');
        this.result_highlight = this.search_results.find('li.active-result').last();
        return this.result_select(evt);
      } 
      break;
    case 27:
      if (this.results_showing) this.results_hide();
      return true;
    case 9:
    case 38:
    case 40:
    case 16:
    case 91:
    case 17:
      break;
    default:
      return this.results_search();
  }
};

Answer 5

Je sais que ce n'est pas la solution, mais c'est une solution alternative.

Je cherchais la partie de l'ajout à la volée et j'ai trouvé que http://ivaynberg.github.com/select2/#tags fournit la même chose que celle choisie + d'autres choses comme le "marquage".