Twitter bootstrap typeahead valeurs multiples ?

Question

J'utilise Twitter Bootstrap avec Jquery. Je veux utiliser le TYPEAHEAD pour un textarea, que j'ai réussi à faire fonctionner très facilement. Mais j'ai aussi besoin qu'elle permette sélection multiple .

J'entends par là qu'après avoir sélectionné un mot dans la saisie semi-automatique, je suis ramené à la zone de texte avec un espace supplémentaire après et si je recommence à taper, il me propose de recommencer.

Voici un bac JS : http://jsbin.com/ewubuk/1/edit (Rien de spécial à l'intérieur).

Existe-t-il une solution simple pour permettre la sélection multiple avec typeahead ? Si oui, comment ?

Merci d'avance.

Answer 1

Modifier Il y a déjà eu un tirage à ce sujet : https://github.com/twitter/bootstrap/pull/2007

---

Vous pouvez vous approcher du comportement souhaité en utilisant un proxy pour le typeahead : Démonstration (jsfiddle)

var $myTextarea = $('#myTextarea');

$('.typeahead').typeahead({
    source: source,
    updater: function(item) {
        $myTextarea.append(item, ' ');
        return '';
    }
});

Je pense que le updater est destinée à ce genre de choses, vous renvoyez simplement ce qui sera affiché.

---

Ou si vous voulez vraiment que tout soit dans le même élément d'entrée vous devrez modifier d'autres méthodes pour que le système ne corresponde qu'à l'élément actuellement typé : Démonstration (jsfiddle)

function extractor(query) {
    var result = /([^,]+)$/.exec(query);
    if(result && result[1])
        return result[1].trim();
    return '';
}

$('.typeahead').typeahead({
    source: source,
    updater: function(item) {
        return this.$element.val().replace(/[^,]*$/,'')+item+',';
    },
    matcher: function (item) {
      var tquery = extractor(this.query);
      if(!tquery) return false;
      return ~item.toLowerCase().indexOf(tquery.toLowerCase())
    },
    highlighter: function (item) {
      var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
      return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
        return '<strong>' + match + '</strong>'
      })
    }
});

Celle-ci n'est pas évidente, car vous devez taper à la fin, après le caractère spécial.

Answer 2

Il s'agit d'un excellent remplacement des boîtes de sélection :

http://ivaynberg.github.io/select2/

(Si vous utilisez la version à valeurs multiples).

Answer 3

Je suppose que vous pourriez modifier le plugin pour permettre des sélections multiples (il suffit de ne pas fermer le menu déroulant) et ajouter les valeurs sélectionnées séparées par une virgule. Le seul problème que je vois est que vous ne savez pas quand fermer le menu déroulant.