jQuery Autocomplete Benutzerdefinierte Daten-und display-abgesehen vom label-Wert

Ich versuche mich zu ziehen, einige Daten aus einer json und anzeigen mit jquery autocomplete.

Json-array enthält ID, Titel, Datum. Auf das display möchte ich zeigen den Titel und das Datum und klicken Sie auf ich möchte, um eine Analyse der spezifischen ID für diesen Titel.

Also derzeit habe ich:

$("input").autocomplete({
      source: function (d, e) {
          $.ajax({
              type: 'GET',
              url: url + mode + encodeURIComponent(d.term) + key,
              dataType: "jsonp",
              success: function (b) {
                  var c = [];
                  $.each(b.results, function (i, a, k) {
                    c.push(a.title + " " + a.date) //Displays Title and Date
                  });
                  e(c)
              }
          })
      },
      select: function (a, b) {
          console.log(b);
            //Appends an array with 2 keys: Value and Label. 
            //Both display the title and date as shown above.
          }
      }).data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>"+ item.label + "</a>" ) 
                       //Here I want to append a.id as class of this
                       //but the only values are value and label.
                    .appendTo( ul );
            };

Also, wie kann ich anfügen <li class="' + a.id + '">" + a.title + " " + a.date + "</li>"

Für benutzerdefinierte format des Etiketts, statt umschreiben der ganzen Anfrage konnte formatieren Sie es nach der AutoVervollständigen-original-Anfrage. Mehr über it hier.

InformationsquelleAutor ClydeM | 2013-02-21

  1. 4

    Sind Sie Strippen aus der zusätzlichen Eigenschaften mit Ihren $.each Schleife innerhalb der AJAX-success-Funktion (nebenbei, ich bin mir ziemlich sicher, dass $.each's callback-nicht nehmen, einen Dritten parameter). Fügen Sie einfach ein label Eigenschaft jedes Ergebnis-Element und es sollte funktionieren:

      source: function (d, e) {
      $.ajax({
          type: 'GET',
          url: url + mode + encodeURIComponent(d.term) + key,
          dataType: "jsonp",
          success: function (b) {
              var c = [];
              $.each(b.results, function (i, a) {
                a.label = a.title + " " + a.date;
                c.push(a);
              });
              e(c);
          }
      })
  },

    Wird das widget funktionieren mit extra Eigenschaften, die Sie gerade muss haben mindestens eine label oder value Eigenschaft.

    Nun in Ihrem _renderItem Funktion können Sie den Zugriff auf die title und date - Eigenschaft jedes Elements:

    .data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>"+ item.label + "</a>" ) 
        .addClass(a.id) //<---
        .appendTo( ul );
};
    für einige Grund .addClass würde nicht funktionieren, aber da Konsole.Logbuch(Menüpunkt) angezeigt, die id, ich habe es auf der append () - Funktion. Danke jedenfalls

    InformationsquelleAutor Andrew Whitaker

  2. 3

    Versuchen. Legen Sie die ID in den Wert Ihrer ajax-call.

    $( "input" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: url + mode + encodeURIComponent(d.term) + key,,
          dataType: "jsonp",
          success: function( data ) {
            response( $.map( data, function( item ) {
              return {
                label: item.title ", " + item.date,
                value: item.id
              }
            }));
          }
        });
      }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<li "+ "class="+"item.value + ">"item.label + "</li>" ) 
                    .appendTo( ul );
            };

    InformationsquelleAutor emmy

  3. 0

    Auf dem $.ajax-Erfolg, den Sie übergeben sollte ein Objekt mit label und Werte und nicht nur der label-string, dann können Sie zuweisen ein.id des Elements.Wert. Wie diese:

    $("input").autocomplete({
  source: function (d, e) {
      $.ajax({
          type: 'GET',
          url: url + mode + encodeURIComponent(d.term) + key,
          dataType: "jsonp",
          success: function (b) {
              var c = [];
              $.each(b.results, function (i, a, k) {
                c.push({'value':a.id, 'label':a.title + " " + a.date}) //Displays Title and Date
              });
              e(c)
          }
      })
  },
  select: function (a, b) {
      console.log(b);
        //Appends an array with 2 keys: Value and Label. 
        //Both display the title and date as shown above.
      }
  }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li class=\""+item.value+"\"></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>"+ item.label + "</a>" ) 
                .appendTo( ul );
        };

    Man kann auch das original-Objekt als label (c.push({'value':a.id, 'label':a})), und lassen Sie die Formatierung für die _renderItem (wo item.label wäre das gleiche wie a)

    InformationsquelleAutor Capilé

Schreibe einen Kommentar