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 le comportement sur lequel je suis basé:
Donc, au lieu d'avoir 3 harcoded dans ma sélection. Je veux que cette liste soit les valeurs d'un tableau json peuplée par une requête ajax. Cela sera déclenché par la saisie semi-automatique.
Donc, si l'utilisateur tape "car", j'envoie la lettre via un appel ajax, et je récupère un tableau comme que:
[{"id":"2489","name":"carrie"},{"id":"2490","name":"Caroline"},{"id":"2491","name":"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:
Je tape "voiture", dans la liste déroulante je reçois "aucun résultat pour la voiture" et puis j'ai tous mes résultats, comme je veux.
1. Pourquoi je reçois le message "Aucun résultat", parce que je peux voir dans mon tableau json et dans ma liste que j'obtiens des résultats.
-----------------------------
Quand je supprime "voiture" et entre "sam". Les résultats pour "sam" sont affichage après les résultats" voiture". (Fondamentalement, je vois le résultat pour les deux, au lieu d'avoir simplement le résultat de ma recherche actuelle)
2. Im je suppose pour effacer l'ul sur keyUp?? Je pensais que le plugin le faisait déjà
-----------------------------
Lorsque je clique sur un nom pour le sélectionner et l'ajouter dans la sélection, je reçois une erreur javascript dans le choix.fichier js
L'élément n'est pas défini
"article.selected = true; " ligne 732
Le lien vers Le plugin: http://harvesthq.github.com/chosen/chosen/chosen.jquery.js
Et il n'ajoute rien à l'intérieur de la sélection.
3. Aucune idée de pourquoi cela se produit
-----------------------------
Avez-vous une idée de ce que je fais quelque chose de mal? Je suis complètement coincé ici...!
Oh et au fait, cela ne me dérange pas de changer la source du plugin, car c'est le seul endroit où je l'utilise....
10 réponses
Essayez ceci:
$('.chzn-choices input').autocomplete({
source: function( request, response ) {
$.ajax({
url: "/change/name/autocomplete/"+request.term+"/",
dataType: "json",
beforeSend: function(){$('ul.chzn-results').empty();},
success: function( data ) {
response( $.map( data, function( item ) {
$('ul.chzn-results').append('<li class="active-result">' + item.name + '</li>');
}));
}
});
}
});
Vous pouvez remplir dynamiquement une liste via AJAX en utilisant l'excellent Select2 plugin. de ma réponse à " Existe-t-il un moyen d'ajouter dynamiquement ajax des éléments via le plugin jQuery choisi?":
Jetez un oeil à la soignée Select2 plugin, qui est basé sur choisi lui-même et prend en charge les sources de données distantes (aka données AJAX) et le défilement infini .
La réponse D'Ashirvad ne fonctionne plus. Notez que le nom de la classe change et utilise l'élémentoption au lieu de l'élément li. J'ai mis à jour ma réponse pour ne pas utiliser l'événement "succès" obsolète, optant plutôt pour .fait ():
$('.chosen-search input').autocomplete({
minLength: 3,
source: function( request, response ) {
$.ajax({
url: "/some/autocomplete/url/"+request.term,
dataType: "json",
beforeSend: function(){ $('ul.chosen-results').empty(); $("#CHOSEN_INPUT_FIELDID").empty(); }
}).done(function( data ) {
response( $.map( data, function( item ) {
$('#CHOSEN_INPUT_FIELDID').append('<option value="blah">' + item.name + '</option>');
}));
$("#CHOSEN_INPUT_FIELDID").trigger("chosen:updated");
});
}
});
Cela pourrait être utile. Vous devez simplement déclencher un événement.
$("#DropDownID").trigger("liszt:updated");
Où "DropDownID" est L'ID de .
Plus d'infos sur. http://harvesthq.github.com/chosen/
Le plugin choisi ne met pas automatiquement à jour sa liste d'options lorsque les éléments D'OPTION dans le DOM changent. Vous devez lui envoyer un événement pour déclencher la mise à jour:
Pré Choisi 1.0:
$('.chzn-select').trigger("liszt:updated");
Choisi 1.0
$('.chosen-select').trigger("chosen:updated");
Si vous gérez dynamiquement les éléments D'OPTION, vous devrez le faire chaque fois que les OPTIONs changent. La façon dont vous le faites variera - dans AngularJS, essayez quelque chose comme ceci:
$scope.$watch(
function() {
return element.find('option').map(function() { return this.value }).get().join();
},
function() {
element.trigger('liszt:updated');
}
}
La réponse choisie est obsolète, il en va de même pour le plugin meltingice /ajax-chosen.
Avec le plugin Select2, il y a beaucoup de bugs que je ne peux pas résoudre.
Voici ma réponse à cette question.
J'ai intégré ma solution avec la fonction trigger après le type d'utilisateur. Merci à cette réponse: https://stackoverflow.com/a/5926782/4319179 .
//setup before functions
var typingTimer; //timer identifier
var doneTypingInterval = 2000; //time in ms (2 seconds)
var selectID = 'YourSelectId'; //Hold select id
var selectData = []; // data for unique id array
//on keyup, start the countdown
$('#' + selectID + '_chosen .chosen-choices input').keyup(function(){
// Change No Result Match text to Searching.
$('#' + selectID + '_chosen .no-results').html('Searching = "'+ $('#' + selectID + '_chosen .chosen-choices input').val() + '"');
clearTimeout(typingTimer); //Refresh Timer on keyup
if ($('#' + selectID + '_chosen .chosen-choices input').val()) {
typingTimer = setTimeout(doneTyping, doneTypingInterval); //Set timer back if got value on input
}
});
//user is "finished typing," do something
function doneTyping () {
var inputData = $('#' + selectID + '_chosen .chosen-choices input').val(); //get input data
$.ajax({
url: "YourUrl",
data: {data: inputData},
type:'POST',
dataType: "json",
beforeSend: function(){
// Change No Result Match to Getting Data beforesend
$('#' + selectID + '_chosen .no-results').html('Getting Data = "'+$('#' + selectID + '_chosen .chosen-choices input').val()+'"');
},
success: function( data ) {
// iterate data before append
$.map( data, function( item ) {
// matching data eg: by id or something unique; if data match: <option> not append - else: append <option>
// This will prevent from select the same thing twice.
if($.inArray(item.attr_hash,selectData) == -1){
// if not match then append in select
$('#' + selectID ).append('<option id="'+item.id+'" data-id = "'+item.id+'">' + item.data + '</option>');
}
});
// Update chosen again after append <option>
$('#' + selectID ).trigger("chosen:updated");
}
});
}
// Chosen event listen on input change eg: after select data / deselect this function will be trigger
$('#' + selectID ).on('change', function() {
// get select jquery object
var domArray = $('#' + selectID ).find('option:selected');
// empty array data
selectData = [];
for (var i = 0, length = domArray.length; i < length; i++ ){
// Push unique data to array (for matching purpose)
selectData.push( $(domArray[i]).data('id') );
}
// Replace select <option> to only selected option
$('#' + selectID ).html(domArray);
// Update chosen again after replace selected <option>
$('#' + selectID ).trigger("chosen:updated");
});
Comme Vicky suggéré, Select2 est livré avec les fonctionnalités AJAX intégrées et ressemble à un grand plugin.
Si vous ne voulez pas passer de Choisi, essayez AJAX Choisi https://github.com/meltingice/ajax-chosen
L'API choisie a beaucoup changé.
Si non de la solution donnée fonctionne pour vous, vous pouvez essayer celle-ci: https://github.com/goFrendiAsgard/gofrendi.chosen.ajaxify
Voici la fonction:
// USAGE:
// $('#some_input_id').chosen();
// chosen_ajaxify('some_input_id', 'http://some_url.com/contain/');
// REQUEST WILL BE SENT TO THIS URL: http://some_url.com/contain/some_term
// AND THE EXPECTED RESULT (WHICH IS GOING TO BE POPULATED IN CHOSEN) IS IN JSON FORMAT
// CONTAINING AN ARRAY WHICH EACH ELEMENT HAS "value" AND "caption" KEY. EX:
// [{"value":"1", "caption":"Go Frendi Gunawan"}, {"value":"2", "caption":"Kira Yamato"}]
function chosen_ajaxify(id, ajax_url){
console.log($('.chosen-search input').autocomplete);
$('div#' + id + '_chosen .chosen-search input').keyup(function(){
var keyword = $(this).val();
var keyword_pattern = new RegExp(keyword, 'gi');
$('div#' + id + '_chosen ul.chosen-results').empty();
$("#"+id).empty();
$.ajax({
url: ajax_url + keyword,
dataType: "json",
success: function(response){
// map, just as in functional programming :). Other way to say "foreach"
$.map(response, function(item){
$('#'+id).append('<option value="' + item.value + '">' + item.caption + '</option>');
});
$("#"+id).trigger("chosen:updated");
$('div#' + id + '_chosen').removeClass('chosen-container-single-nosearch');
$('div#' + id + '_chosen .chosen-search input').val(keyword);
$('div#' + id + '_chosen .chosen-search input').removeAttr('readonly');
$('div#' + id + '_chosen .chosen-search input').focus();
// put that underscores
$('div#' + id + '_chosen .active-result').each(function(){
var html = $(this).html();
$(this).html(html.replace(keyword_pattern, function(matched){
return '<em>' + matched + '</em>';
}));
});
}
});
});
}
Voici votre HTML:
<select id="ajax_select"></select>
Et voici votre javasscript:
// This is also how you usually use chosen
$('#ajax_select').chosen({allow_single_deselect:true, width:"200px", search_contains: true});
// And this one is how you add AJAX capability
chosen_ajaxify('ajax_select', 'server.php?keyword=');
Pour plus d'informations, veuillez vous référer à la https://github.com/goFrendiAsgard/gofrendi.chosen.ajaxify#how-to-use
Si vous avez deux sélections ou plus et utilisez la réponse de Steve McLenithan, essayez de remplacer la première ligne par:
$('#CHOSENINPUTFIELDID_chosen > div > div input').autocomplete({
Pas supprimer le suffixe: _chosen
var object = $("#lstValue_chosen").find('.chosen-choices').find('input[type="text"]')[0];
var _KeyCode = event.which || event.keyCode;
if (_KeyCode != 37 && _KeyCode != 38 && _KeyCode != 39 && _KeyCode != 40) {
if (object.value != "") {
var SelectedObjvalue = object.value;
if (SelectedObjvalue.length > 0) {
var obj = { value: SelectedObjvalue };
var SelectedListValue = $('#lstValue').val();
var Uniqueid = $('#uniqueid').val();
$.ajax({
url: '/Admin/GetUserListBox?SelectedValue=' + SelectedListValue + '&Uniqueid=' + Uniqueid,
data: { value: SelectedObjvalue },
type: 'GET',
async: false,
success: function (response) {
if (response.length > 0) {
$('#lstValue').html('');
var options = '';
$.each(response, function (i, obj) {
options += '<option value="' + obj.Value + '">' + obj.Text + '</option>';
});
$('#lstValue').append(options);
$('#lstValue').val(SelectedListValue);
$('#lstValue').trigger("chosen:updated");
object.value = SelectedObjvalue;
}
},
error: function (xhr, ajaxOptions, thrownError) {
//jAlert("Error. Please, check the data.", " Deactivate User");
alert(error.StatusText);
}
});
}
}
}