it-swarm.com.de

Jquery Ausgewähltes Plugin - Dynamische Liste von Ajax

Ich versuche, mein Dropdown-Menü mithilfe des Plugins zu erstellen, das für Multiple Select ..__ ausgewählt wurde. Hier ist das Verhalten, auf dem ich mich stütze:

http://jsfiddle.net/JfLvA/

Anstelle von 3 harcoded <Option> in meiner Auswahl. Ich möchte, dass diese Liste die Werte eines Json-Arrays ist, das von einer Ajax-Anforderung gefüllt wird. Dies wird durch Autovervollständigung ausgelöst.

Wenn der Benutzer "car" eingibt, schicke ich den Brief über einen Ajax-Aufruf und erhalte ein Array wie dieses zurück:

[{"id": "2489", "name": "carrie"}, {"id": "2490", "name": "Caroline"}, {"id": "2491", "name": "Carole"}]

Der 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>');

          }
       });
    }
});

Ergebnis:

Ich tippe "Auto", in der Dropdown-Liste bekomme ich "Kein Ergebnis für Auto" und dann habe ich alle meine Ergebnisse, wie ich will.

1. Warum erhalte ich die Meldung "Kein Ergebnis", weil ich in meinem json-Array und in meiner Liste sehen kann, dass ich Ergebnisse bekomme.

 -----------------------------

Wenn ich "Auto" lösche und "sam" eingebe. Die Ergebnisse für "sam" werden nach den Ergebnissen "Auto" angezeigt. (Grundsätzlich sehe ich das Ergebnis für beide, anstatt nur das Ergebnis meiner aktuellen Suche zu haben.)

2. Ich nehme an, die ul auf keyUp zu löschen? Dachte das Plugin tat das schon

 -----------------------------

Wenn ich auf einen Namen klicke, um ihn tatsächlich auszuwählen und ihn zur Auswahl hinzuzufügen, erhalte ich einen Javascript-Fehler in der Datei selected.js

artikel ist undefiniert
"item.selected = true;" Zeile 732

den Link zum Plugin: http://harvesthq.github.com/chosen/chosen/chosen.jquery.js

und es wird nichts innerhalb des select hinzugefügt.

3. Keine Ahnung, warum das so ist

 -----------------------------

Habt ihr eine Idee, was ich falsch mache? Ich stecke hier völlig fest ...!

Übrigens, es macht mir nichts aus, die Plugin-Quelle zu ändern, da es der einzige Ort ist, an dem ich es benutze ...

37
Lelly

versuche dies:

$('.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
Ashirvad

Sie können eine Liste über AJAX mit dem ausgezeichneten Select2 - Plugin dynamisch ausfüllen. Von meiner Antwort zu "Gibt es eine Möglichkeit, Elemente dynamisch durch ein ausgewähltes Plugin hinzuzufügen?" :

Schauen Sie sich das nette Select2 - Plugin an, das auf Chosen selbst basiert und Remote-Datenquellen (auch bekannt als AJAX Daten) und unendliches Scrollen unterstützt.

46
Vicky Chijwani

Ashirvads Antwort funktioniert nicht mehr. Beachten Sie, dass sich der Klassenname ändert, und verwenden Sie das option -Element anstelle des li - Elements. Ich habe meine Antwort dahingehend aktualisiert, dass das veraltete Ereignis "success" nicht verwendet wird. Stattdessen wählte ich .done ():

$('.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

Das könnte hilfreich sein. Sie müssen nur ein Ereignis auslösen.

$("#DropDownID").trigger("liszt:updated");

Wobei "DropDownID" die ID von <select> ist.

Mehr Infos hier: http://harvesthq.github.com/chosen/

11
Nishant Joshi

Das ausgewählte Plugin aktualisiert seine Optionsliste nicht automatisch, wenn sich die OPTION-Elemente im DOM ändern. Sie müssen ein Ereignis senden, um das Update auszulösen:

Vorgewähltes 1.0: $('.chzn-select').trigger("liszt:updated");

Ausgewählt 1.0 $('.chosen-select').trigger("chosen:updated");

Wenn Sie die OPTION-Elemente dynamisch verwalten, müssen Sie dies bei jeder Änderung der OPTIONen tun. Die Art und Weise, wie Sie dies tun, variiert. Versuchen Sie in AngularJS Folgendes:

$scope.$watch(
  function() {
    return element.find('option').map(function() { return this.value }).get().join();
  }, 
  function() {
    element.trigger('liszt:updated');
  }
 }
8
Luke Stone

Die gewählte Antwort ist veraltet, das gleiche gilt für das von meltice/ajax gewählte Plugin.

Mit Select2-Plugin gibt es viele Fehler, was ich nicht lösen kann.

Hier meine Antwort auf diese Frage.

Ich habe meine Lösung mit Funktionsauslöser nach Benutzertyp ..__ integriert. Dank dieser Antwort: 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
Afiq Abdullah

Wie von Vicky vorgeschlagen, enthält Select2 die eingebauten AJAX - Funktionen und sieht aus wie ein großartiges Plugin. 

Wenn Sie nicht von Chosen wechseln möchten, versuchen Sie es mit AJAX-Chosen https://github.com/meltingice/ajax-chosen

1
Deepak Thomas

Die gewählte API hat sich sehr verändert.

Wenn keine der angegebenen Lösungen für Sie funktioniert, können Sie diese versuchen: https://github.com/goFrendiAsgard/gofrendi.chosen.ajaxify

Hier ist die Funktion:

// 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>';
                    }));
                });
            }
        });
    });
}

Hier ist dein HTML:

<select id="ajax_select"></select>

Und hier ist dein Javasskript:

// 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=');

Weitere Informationen finden Sie unter https://github.com/goFrendiAsgard/gofrendi.chosen.ajaxify#how-to-use

1
goFrendiAsgard

Wenn Sie ein Select-Tag aus Ajax generieren, fügen Sie diese Insider-Erfolgsfunktion hinzu:

$('.chosen').chosen();

Oder: Wenn Sie ein Auswahl-Tag beim Klicken auf die Schaltfläche Weitere hinzufügen generieren, fügen Sie Folgendes hinzu:

$('.chosen').chosen();

innerhalb der Funktion.

0
VikashSDNT
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
Pandian

Wenn Sie zwei oder mehr Auswahlen haben und die Antwort von Steve McLenithan verwenden, versuchen Sie, die erste Zeile durch Folgendes zu ersetzen:

$('#CHOSENINPUTFIELDID_chosen > div > div input').autocomplete({

suffix nicht entfernen: _chosen

0
user2213831