UserPicker l'élément d'entrée comme GMAIL

Je suis à la recherche d'un userpicker qui ressemble à Gmail, que lorsque vous ajoutez une adresse "À", il devient un label, ou comme StackOverflow lorsque vous ajoutez des tags

J'ai trouvé ce plugin:
http://htmlpreview.github.com/?https://github.com/ErikNoren/entitypicker/blob/master/entitypickerdemo.html
mais je voudrais trouver plus de plugins pour comparer...

Dans mon cas, Dans mon cas, j'ai besoin de convertir des deux valeurs (mail et téléphone) dans l'une étiquette...Comment puis-je le faire??

Merci beaucoup!

Vous pourriez essayer d'ajouter une demande d'amélioration pour le projet GitHub. J'entends l'auteur est un gars vraiment sympa.

OriginalL'auteur | 2013-03-08

  1. 13

    Mon actuel de saisie semi-automatique plugin de choix est Select2.

    http://ivaynberg.github.com/select2/

    Salut! c'est tellement bon! Mais vous pouvez changer la valeur du tag en cliquant sur?
    clickover? Je ne sais pas ce que tu veux dire?
    Salut! Désolé pour la mi anglais...je veux dire que si vous cliquez sur la balise, vous pouvez modifier sa valeur...comme vous pouvez le voir avec les "pour" les adresses gmail
    Je vois. Je ne le pense pas que la sortie de la boîte.
    aucune chance de trouver la balise d'entrée, sur lequel lors d'un clic, qui sera modifiable... Merci de partager, merci.

    OriginalL'auteur Geoff Appleford

  2. 5

    J'ai créé un violon à l'aide de typeahead.js et jquery. Jetez un coup d'oeil.
    https://jsfiddle.net/Rohith_KP/k73msa47/

    ! function(source) {
function extractor(query) {
var result = /([^,]+)$/.exec(query);
if (result && result[1])
return result[1].trim();
return '';
}
function tagTmpl(item) {
return '<div class="selected">' +
'<span class="value-wrapper">' +
'<div class="value">' + item + '</div>' +
'<div class="value-close"></div>' +
'</span>' +
'</div>'
}
<!--init  -->
var initData = ["Alabama", "Alaska", "Arizona", "Arkansas"],
tagTmpls = '';
$.each(initData, function(index, item) {
tagTmpls += tagTmpl(item);
})
$('.multiselect').before(tagTmpls);
$('.multiselect-display').text(initData.join(', '));
$('.multiselect').data({
"selectedValues": initData
});
<!-- end init -->
$('.multiselect').typeahead({
source: source,
updater: function(item) {
var tmpl = tagTmpl(item);
this.$element.before(tmpl);
var dataToSend = this.$element.data("selectedValues");
dataToSend = dataToSend ? dataToSend : [];
dataToSend.push(item);
this.$element.data({
"selectedValues": dataToSend
})
return '';
},
matcher: function(item) {
var tquery = extractor(this.query);
if (!tquery) return false;
return ~item.toLowerCase().indexOf(tquery)
},
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>'
})
}
});
$('.multiselect-wrapper').off('click').on('click', '.value-close', function() {
$this = $(this);
var text = $this.siblings('.value').text();
var selectedValues = $(event.currentTarget).find('.multiselect').data("selectedValues");
removeStringFromArray(selectedValues, text);
$this.parents('.selected').hide();
window.setTimeout(function() {
$this.parents('.selected').remove();
}, 0)
})
$('.multiselect-wrapper').off('click', multislctWrprClickHndlr).on('click', multislctWrprClickHndlr)
function multislctWrprClickHndlr(e) {
$("body").off('click', bodyClickHandler).on('click', bodyClickHandler);
if (!$(e.target).is('.selected')) {
$('.multiselect').focus()
}
};
$('.multiselect-display').off('click', multislctDsplyClickHndlr).on('click', multislctDsplyClickHndlr)
function multislctDsplyClickHndlr() {
$(this).hide()
$('.multiselect-wrapper').trigger('click').show();
};
function bodyClickHandler(e) {
debugger;
if ($(e.target).is('.multiselect-wrapper') || $(e.target).parents('.multiselect-wrapper').length || $(e.target).is('.multiselect-display') || $(e.target).parents('.multiselect-display').length) {
e.preventDefault();
return;
}
$("body").off('click', bodyClickHandler);
$('.multiselect-wrapper').hide();
$('.multiselect-display').text($('.multiselect').data("selectedValues").join(', ')).show()
}
function removeStringFromArray(array, search_term) {
for (var i = array.length - 1; i >= 0; i--) {
if (array[i] === search_term) {
array.splice(i, 1);
break;
}
}
}
}(["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut"]);
    De l'Excellent travail. Mais quand je tape quelque chose d'autre que de la suggestion, et puis de nouveau en sélectionnant le texte à partir de la liste déroulante, la saisie des textes disparaissent. Je veux garder le texte de tous les types d'utilisateurs. Ce que j'aimerais voir, c'est votre exemple de type non-suggestion de texte. Le non-suggestion textes n'auront pas de style ou de la croix bouton, il suffit d'un simple texte.
    je vous remercie. Je n'ai pas la totalité de l'image. Je crois que vous voulez ajouter de nouveaux textes autres que la saisie semi-automatique? droit? Mais pourquoi pas de style?
    ce que je suis en train de réaliser est, une personne va commencer à écrire, quand il veut une suggestion qu'il sera de type @ ou": "signe, la suggestion apparaîtra et il vous en sélectionnez une, le texte sélectionné restera normalement le long de avec d'autres textes, sans @ ou ": "sign. C'est pourquoi aucun style. La source de données serait à partir de l'Api Web.

    OriginalL'auteur Ninjaneer

  3. 3

    J'ai trouvé ce plugin pour répondre à l'exigence. Profitez de.

    UserPicker l'élément d'entrée comme GMAIL

    Le lien ne fonctionne pas.

    OriginalL'auteur Umair Saleem

  4. 1

    Essayer celui-ci.
    Un plugin jQuery conçu pour les e-mails liées apps permettant à l'utilisateur d'ajouter/supprimer des multiples séparées par des virgules adresses e-mail dans un champ de texte unique. Avec une base adresse Email de validation de la fonctionnalité à l'aide d'expressions régulières.

    https://github.com/pierresh/multiple-emails.js

    OriginalL'auteur VGranin