web-dev-qa-db-fra.com

jQuery Autocomplete .data ("autocomplete") n'est pas défini

Lorsque j'essaie d'implémenter la saisie semi-automatique à l'aide du code ci-dessous, j'obtiens une erreur indiquant:

.data("autocomplete") is undefined

Cependant, si je supprime la méthode .data () de la fin, cela fonctionne très bien (juste avec les graphiques personnalisables fournis par .data ()). Quelqu'un peut-il me dire ce qui ne va pas?

$("input#testInput").bind("autocompleteselect", function (event, ui) {

  }).autocomplete({
      appendTo: "#autoCompList",
      source: function (request, response) {
          $.ajax({

              url: JSONP CALL URL
              dataType: "jsonp",
              data: {
                  featureClass: "P",
                  style: "full",
                  maxRows: 12,
                  name_startsWith: request.term
              },
              success: function (data) {
                  response($.map(data.data, function (item) {
                      fbPageJson = item;
                          return {
                              label: item.name,
                              image: item.picture,
                              json: item,
                          }
                  }));
              },
          });
      }

  }).data("autocomplete")._renderItem = function (ul, item) {
      return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/></a>" + item.label).appendTo(ul);
  };
jqueryautocompleteundefinedjquery-autocomplete
31
Ben Pearce

J'ai eu le même problème et basé sur la version 1.10.0 de jquery ui, je pense que vous devriez essayer

data('uiAutocomplete')

au lieu de

data('autocomplete')

Sur la base du commentaire de Johnny, j'ai vérifié le fonctionnement de la fonction .data (). Oui, jQuery renvoie null à partir de l'appel .data () lorsque le sélecteur ne trouve aucun élément.

Par conséquent, s'il n'y a aucun élément correspondant pour votre sélecteur, aucun objet de saisie semi-automatique n'est créé et ajouté à l'objet de données personnalisé.

Il semble donc préférable de le faire:

    $(selector).autocomplete({ your autocomplete config props here });
    if ( $(selector).data() ) {

    // some jQueryUI versions may use different keys for the object. so to make sure,
    // put a breakpoint on the following line and add a watch for $(selector).data(). 
    // then you can find out what key is used by your jQueryUI script.

        var ac = $(selector).data('uiAutocomplete');
        if ( ac ) {
           // do what you want with the autoComplete object. below is the changed version of an example from jqueryUI autocomplete tutorial

           ac._renderItem = function(ul, item) {
                return $("<li>")
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
            };
        }
    }
59
Cagatay Kalan

J'ai trouvé la solution!

Certains pensent que "ui-autocomplete" est faux, donc ils utilisent "autocomplete" ou "uiAutocomplete", mais c'est faux. En fait, "ui-autocomplete" est la bonne façon de procéder.

J'ai le même problème que vous, et je trouve avec un ami le problème de ce code. Au lieu:

.data('ui-autocomplete')._renderItem = function (ul, item) {
       if (!_.include(self.idArr, item.id)) {
            return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);
            }
    };

Utilisation:

._renderItem = function (ul, item) {
      if (!_.include(self.idArr, item.id)) {
         return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);
           }
       };

Je pense que combobox et autocomplete renvoie une donnée ('ui-autocomplete'), donc si vous tapez .data ('ui-autocomplete') vous faites quelque chose comme:

.data('ui-autocomplete').data('ui-autocomplete')

Qu'est-ce qui ne va pas ... eh bien, en fait, je ne sais pas pourquoi cela ne fonctionne pas et pourquoi sans cela fonctionne, mais croyez-moi, supprimez .data ('ui-autocomplete') et soyez heureux!

8
Paladini

data('ui-Autocomplete') a résolu mes problèmes. Je pense que c'est de jquery 1.7 Avec jquery-ui 1.8. data('autocomplete') était ok. Le même script avec une version récente de ces fichiers ne fonctionne pas.

8
maladev

En fait, dans votre fonction de réussite, vous appelez response et renvoyez un objet comme

return {
           label: item.name,
           image: item.picture,
           json: item,
       }

mais dans la ligne suivante

return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/></a>" + item.label + " Number of Likes: " + item.likes).appendTo(ul);

vous utilisez item.likes qui n'est pas disponible dans votre objet retourné, c'est donc le problème. Je pense que vous pouvez l'utiliser comme

success:function(data) {
    var result = $.map(data, function (item){
    return {
            label: item.name,
            image: item.picture,
            item.likes 
        };
    });
    response(result);
}

Gardez également le item.label à l'intérieur de <a></a> (cela peut ne pas être la cause de l'erreur), comme

return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/>"+item.label+"</a>").appendTo(ul);

et assurez-vous dans la ligne suivante

$.map(data.data, function (item) // notice data.data

si cela doit être data.data ou seulement data. Vous pouvez également supprimer le json: item de l'objet parce que vous ne l'avez utilisé nulle part, en ce qui me concerne.

pdate: Changer la ligne suivante

.data("autocomplete")._renderItem = function (ul, item) {...};

à

.data("autocomplete")?._renderItem = function (ul, item) {...}; // notice the ? mark

ou

if(typeof $('#Your_Input_Id').val()!="undefined")
{
    $('#Your_Input_Id').autocomplete({....});
}

ou

var mydata=$('#Your_Input_Id').autocomplete(...).data('autocomplete');
if(mydata)
    mydata._renderItem = function (ul, item) {...};
4
The Alpha

Si vous regardez le dernier exemple de combobox sur la démo du site, vous verrez qu'ils utilisent des données ('ui-Autocomplete'). J'ai rencontré le même problème que toi. J'utilisais auparavant jquery-1.6.2 et jquery-ui-1.8.16. Une fois que j'ai mis à jour mes fichiers vers jquery-1.9.1 et jquery-ui-1.10.0, l'erreur a été corrigée. Je suppose que l'ancienne saisie semi-automatique jquery-ui ne définissait pas la propriété data ('ui-Autocomplete'), elle était donc nulle/non définie lors de la récupération. J'espère que cela aide d'autres personnes car vous avez probablement déjà résolu le problème.

1
Johnny

Vous pouvez implémenter la ligne mentionnée ci-dessous

.autocomplete ("instance") ._ renderItem = function (ul, item) {

instate of

.data ("saisie semi-automatique") ._ renderItem = function (ul, item) {

selon la documentation disponible sur le site Jquery documentation Jquery AutoComplete et exemple vous trouverez ce code.

à partir de la version mise à niveau de jquery 1.10, ils ont modifié le code. J'espère que cela vous aidera.

0
Pratik Joshi