jQuery Autocomplete de données Personnalisées et de les afficher en dehors de l'étiquette,valeur

Je suis en train d'essayer de tirer des données au format json et de les afficher à l'aide de jquery autocomplete.

Le tableau json contient ID, Titre, Date. Sur l'écran, j'en veux pour preuve le Titre et la Date et cliquez sur je veux analyser l'ID spécifique pour ce titre.

Donc actuellement, j'ai:

$("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 );
            };

Alors, comment puis-je ajouter <li class="' + a.id + '">" + a.title + " " + a.date + "</li>"

InformationsquelleAutor ClydeM | 2013-02-21
  1. 4

    Vous êtes à défaire les propriétés supplémentaires avec votre $.each boucle à l'intérieur de l'AJAX succès de la fonction (au passage, je suis sûr que $.each's de rappel ne pas prendre une troisième paramètre). Ajoutez simplement un label propriété à chaque élément de résultat et il devrait fonctionner correctement:

      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);
          }
      })
  },

    Le widget fonctionne correctement avec supplémentaire propriétés, vous venez de doit ont au moins un label ou value propriété.

    Maintenant dans votre _renderItem fonction, vous pouvez accéder à la title et date de la propriété de chaque élément:

    .data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>"+ item.label + "</a>" ) 
        .addClass(a.id) //<---
        .appendTo( ul );
};
    • pour une raison quelconque .addClass pas de travail, mais depuis la console.journal(item) pour afficher l'id, je l'ai ajouté sur le append() de la fonction. Merci en tout cas
    InformationsquelleAutor Andrew Whitaker
  2. 3

    De l'essayer. Lieu de l'ID de la valeur de votre appel ajax.

    $( "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

    Sur le $.ajax succès, vous devriez passer un objet contenant l'étiquette et les valeurs plutôt que seulement l'étiquette de la chaîne, vous pouvez attribuer l'une.id de l'élément.de la valeur. Comme ceci:

    $("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 );
        };

    Vous pouvez également passer à l'objet d'origine en tant qu'étiquette (c.push({'value':a.id, 'label':a})), et de laisser la mise en forme de la _renderItem (où item.label serait le même que a)

    InformationsquelleAutor Capilé