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é:

Http://jsfiddle.net/JfLvA/

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....

37
demandé sur j0k 2012-08-21 00:03:29

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>');
        }));
      }
    });
  }
});
27
répondu Ashirvad 2012-11-27 19:32:58

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 .

46
répondu Vicky Chijwani 2017-05-23 12:10:36

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");
        });
    }
});
20
répondu Steve McLenithan 2014-05-09 16:03:47

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/

11
répondu Nishant Joshi 2012-10-10 12:48:38

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');
  }
 }
8
répondu Luke Stone 2013-09-09 05:45:39

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");

  });
5
répondu Afiq Abdullah 2017-05-23 12:02:22

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

1
répondu Deepak Thomas 2013-07-21 12:41:40

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

1
répondu goFrendiAsgard 2015-10-18 08:44:37

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

0
répondu user2213831 2016-02-23 19:38:05
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);
                }
            });
        }
    }
}
0
répondu Pandian 2018-07-10 05:18:44