Jquery Choisi plugin - remplir dynamiquement la liste par Ajax
Im essayant de construire mon menu déroulant en utilisant le plugin Choisi pour Multiples Sélectionnez .
Voici pour le comportement je me suis basé sur:
Donc, au lieu d'avoir 3 harcoded < option > dans mon select. Je veux que cette liste soit les valeurs d'un tableau json peuplée par une requête ajax. Ce sera déclenché par la saisie semi-automatique.
Ainsi, si l'utilisateur de type "voiture", im envoi de la lettre par le biais d'un appel ajax, et im obtenir un tableau comme ça:
[{"id":"2489","nom":"carrie"},{"id":"2490","nom":"Caroline"},{"id":"2491","nom":"Carole"}]
Le code:
$(function() {
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
$('.chzn-choices input').autocomplete({
source: function( request, response ) {
$.ajax({
url: "/change/name/autocomplete/"+request.term+"/",
dataType: "json",
success: function( data ) {
response( $.map( data, function( item ) {
$('ul.chzn-results').append('<li class="active-result">' + item.name + '</li>');
}
});
}
});
Résultat:
J'type "voiture", dans la liste déroulante Im obtenir "Pas de résultat pour la voiture" et puis j'ai tous mes résultats que je veux.
1. Pourquoi je suis ce que je reçois le "Pas de résultat" du message, cause que je peux voir dans mon tableau json et à l'intérieur de ma liste que je suis l'obtention de résultats.
-----------------------------
Quand je supprime "voiture" et entrez "sam". Les résultats pour "sam" sont diffusées au-delà de la "voiture" des résultats. (En gros, je vois le résultat pour les deux, au lieu d'avoir juste le résultat de ma recherche en cours)
2. Im je suppose que pour effacer l'ul sur keyUp?? La pensée le plugin faisait déjà
-----------------------------
Lorsque je clique sur un nom pour sélectionner et ajouter dans le select, je me fais une erreur javascript à l'intérieur de la chosen.js fichier
élément n'est pas défini
"le point.selected = true;" ligne de 732
le lien pour le plugin:
http://harvesthq.github.com/chosen/chosen/chosen.jquery.js
et ce n'est pas ajouter quoi que ce soit à l'intérieur de la sélectionner.
3. Aucune idée de pourquoi ce qui se passe
-----------------------------
Les gars, vous ne avez aucune idée sur ce que je suis je en train de faire quelque chose de mal? Je suis complètement coincé ici...!
Oh et en passant, je n'ai pas l'esprit de changer le plugin source, comme c'est le seul endroit où je l'utilise....
- comment abt faire $('ul.chzn-résultats").empty() avant de l'ajouter .l'essayer
- maintenant il est de retour moi le résultat pour le seul terme que je recherche, mais il est de retour seulement 1 résultat, même si j'ai 10 dans mon tableau
- La solution que j'ai trouvé était d'ajouter $('.interface de saisie semi-automatique-entrée').keyup(function() { $('.chzn-résultats").empty(); }); Mais c'est juste pour la question #2
- vous ne devriez pas être la manipulation de
chzn-choices
. Vous devez ajouter le json articles que vous obtenez à partir de votre serveur à votre chzn-sélectionnez le champ, puis invoque$(".chzn-select").trigger("liszt:updated");
. - $("#form_field").trigger("choisis:mise à jour"); Utilisé Cette
- Qui de saisie semi-automatique plugin utilisez-vous?
Vous devez vous connecter pour publier un commentaire.
essayez ceci:
Vous pouvez remplir dynamiquement une liste via AJAX à l'aide de l'excellent Select2 plugin. À partir de ma réponse à "Est-il un moyen dynamique d'ajax ajouter des éléments par le biais de jquery choisi plugin?":
Ashirvad réponse ne fonctionne plus. Remarque la modification du nom de classe et à l'aide de la option élément au lieu de la li élément. J'ai mis à jour ma réponse pour ne pas utiliser le obsolète "succès" de l'événement, plutôt que d'opter pour .done():
$("#CHOSEN_INPUT_FIELDID")
- dans quel domaine est-ce? Je n'ai pas de champ de saisie avec un IDselect
élément que vous avez utilisés avec choisi. E. g.,$("#CHOSEN_INPUT_FIELDID").chosen(...)
. C'est du moins ce à quoi il ressemble de ce code.Cela pourrait être utile. Vous avez juste à déclencher un événement.
Où "DropDownID" est l'ID de
<select>
.Plus d'infos ici:
http://harvesthq.github.com/chosen/
Choisi plugin ne met pas automatiquement à jour sa liste d'options lorsque l'OPTION éléments dans le DOM changement. Vous devez envoyer un événement à déclencher la mise à jour:
Pré Choisi 1.0:
$('.chzn-select').trigger("liszt:updated");
Choisi 1.0
$('.chosen-select').trigger("chosen:updated");
Si vous êtes à la gestion dynamique de l'OPTION éléments, alors vous aurez à le faire à chaque fois que les OPTIONs de changement. La façon dont vous faites cela varie en AngularJS, essayez quelque chose comme ceci:
La réponse choisie est obsolète, en va de même pour meltingice /ajax choisi plugin.
Avec Select2 plugin a de nombreux bugs qui est je ne peux pas le résoudre.
Ici, ma réponse à cette question.
J'ai intégré ma solution avec la fonction de déclenchement après le type d'utilisateur.
Merci pour cette réponse : https://stackoverflow.com/a/5926782/4319179.
Comme Vicky suggéré, Select2 est livré avec les fonctionnalités AJAX intégré et ressemble à un excellent plugin.
Si vous ne voulez pas passer de Choisi, essayez AJAX Choisi https://github.com/meltingice/ajax-chosen
Choisi API a changé beaucoup de choses.
Si non de la solution qui fonctionne pour vous, vous pouvez essayer celui-ci: https://github.com/goFrendiAsgard/gofrendi.chosen.ajaxify
Voici la fonction:
Voici votre code HTML:
Et voici votre javasscript:
Pour plus d'informations, veuillez vous référer à https://github.com/goFrendiAsgard/gofrendi.chosen.ajaxify#how-to-use
Si vous avez deux ou plus permet de sélectionner et d'utiliser Steve McLenithan réponse, essayez de remplacer la première ligne par:
pas supprimer le suffixe:
_chosen
Si vous êtes à la génération de balise select de l'ajax, ajouter ce succès à l'intérieur de la fonction:
Ou, Si vous êtes à la génération de balise select sur en cliquant sur ajouter un bouton plus, puis ajouter:
l'intérieur de la fonction.