Ajouter dynamicment une option à la sélection choisie de plusieurs plug-in JQuery

Je souhaite append le texte saisi par un utilisateur dans le champ de texte d’un type choisi, sélectionner plusieurs entrées en tant qu’option, puis le sélectionner automatiquement. Tout cela lorsque l’option n’existe pas, si l’option existe, je souhaite sélectionnez-le. Jusqu’ici j’ai réussi à faire ceci:

Chosen.prototype.add_text_as_option = function () { $('#id_select').append( $('') .html(this.search_field.val()) .attr('selected', 'selected') .attr('value', 0) ); $('#id_select').sortinggger("liszt:updated"); return false; };

J’appelle cette fonction chaque fois que l’utilisateur appuie sur Entrée pendant que le champ de saisie est keydown_check dans la fonction keydown_check .

J’ai deux problèmes:

Priorité absolue, lorsque l’utilisateur appuie sur Entrée et a saisi une sous-chaîne d’une option, l’option n’est pas sélectionnée, mais le texte de la sous-chaîne est ajouté et sélectionné. Pas ce que je veux.

Par exemple: si j’ai l’option “foo” et que je commence à taper “fo”, choisi marquera la première option comme candidate (“foo”). Par conséquent, si j’appuie sur entrée, elle devrait être sélectionnée. que “fo” est ajouté en tant qu’option et sélectionné, alors que je voulais réellement sélectionner “foo”.

Si je sélectionne “foo” en un clic, tout se passera bien. L’option choisie est sélectionnée et le texte de la sous-chaîne est pris dans le cadre de l’option.

Comment puis-je append une option inexistante à choisi, sans perdre toutes les fonctionnalités d’origine?

Comment puis-je accéder au champ de sélection multiple que j’ai initié à l’intérieur du plugin choisi? Comme vous pouvez le constater dans le code ci-dessus, l’id du champ à sélectionner plusieurs est codé en dur. Je veux faire cela pour pouvoir actualiser la sélection lorsque l’utilisateur ajoute une nouvelle option.
La fonctionnalité que je recherche est très similaire au widget compétences de linkedin.

Merci d’avance!

Vous devriez essayer le plugin select2 qui est basé sur le plugin choisi, mais cela fonctionne bien avec l’ajout dynamic d’éléments.

Voici le lien: http://ivaynberg.github.com/select2/

Regardez l’exemple de création automatique de jetons, je pense que c’est peut-être ce que vous recherchez.

J’avais besoin de ça aujourd’hui alors j’ai écrit quelque chose comme ça:

 $(function() { // form id $('#newtag').alajax({ // data contains json_encoded array, sent from server success: function(data) { // this is missing in alajax plugin data = jQuery.parseJSON(data); // create new option for original select var opt = document.createElement("OPTION"); opt.value = data.id; opt.text = data.name; opt.selected = true; // check if the same value already exists var el = $('#tags option[value="' + opt.value + '"]'); if( !el.size() ) { // no? append it and update chosen-select field $('#tags').append( opt ).sortinggger("chosen:updated"); } else { // it does? check if it's already selected if(!el[0].selected) { // adding already existent element in selection el[0].selected = true; $('#tags').sortinggger("chosen:updated"); } else { alert("Already selected and added."); } } } }) });

“#” newtag est un formulaire, “.alajax” est un plugin qui envoie les données de formulaire de manière asynchrone et renvoie la réponse du serveur au format JSON. Dans le contrôleur, je vérifie si une étiquette existe, sinon je la crée. En réponse, j’ai cinq objects “jsoned”.

il suffit d’appeler cela keyup_check keydown_check est appelé avant l’initialisation de la lettre pressée contrairement à keyup_check

J’ai créé un jsfiddle de jquery choisi qui prend du texte et crée en option. Dans les versions antérieures de jQuery, l’option de création d’installation est choisie.

 create_option: true; persistent_create_option: true; skip_no_results: true;

Vous pouvez utiliser ce code:

 $('#id_select').chosen({ width: '100%', create_option: true, persistent_create_option: true, skip_no_results: true });

lien jsfiddle: https://jsfiddle.net/n4nrqtek/

J’ai trouvé une solution multiple select

 var str_array = ['css','html']; $("#id_select").val(str_array).sortinggger("chosen:updated");