[autocomplete] (v.1.0.2) populate() function loads raw data not parsed data

[johnsa]

While implementing the autocomplete plugin v.1.0.2 (excellent work, btw) - we overrode the parse() function in the options to grab an arbitrary json object and load the data array. That worked very well.

However, we found that the populate() function is referencing back to the original raw data rather than the parsed data, which caused the plugin to fail, and struck us as a bug.

By changing this so that we reference only our parsed data, we were able to easily implement the plugin against our json feed. Below I list the very small change we made to jquery.autocomplete.js, our initialization code, and an example of data we were working against:

========= The changes we made were on lines 451 - 452 on jquery.autocomplete.js :

loop through the array and create a lookup structure for ( var i = 0, ol = options.data.length; i < ol; i++ ) {

var rawValue = options.data[i];

became

loop through the array and create a lookup structure for ( var i = 0, ol = data.length; i < ol; i++ ) {

var rawValue = data[i];

======== We instantiated the plugin with the following code:

var options = {

minChars: 0, width: 310, matchContains: false, autoFill: false,

extraParams: {

format: 'json'

},

dataType: 'json',

our parse function maps our json object to the expected data structure for use with autocomplete

parse: function(data) {

var parsed = []; data = data.microformats.vcard; for (var i = 0; i < data.length; i++) {

dataRow = {

fn: data[i].fn.value, email: data[i].email[0].value, uri: data[i].caladruri.value, type: data[i].kind.value

}; parsed[i] = {

data: dataRow, value: data[i].fn.value, result: data[i].email[0].value

};

} return parsed;

}, formatItem: function(item) {

return " \"" + item.fn + "\" + item.email +?";

},

formatMatch: function(item) {

return " \"" + item.fn + "\" + item.email +?";

}, formatResult: function(item) {

return item.email;

}

};

jQuery(document).ready(function($) {

$('#bwRaUri').autocomplete("url-to-carddav-server-went-here", options)

});

====== and the data returned looks something like this:

{

"microformats": {

"vcard": [

{ "version" : {"value" : "4.0"},

"rev" : {"value" : "20090128184009Z"},

"source" : [ {"value" : "\/ucarddav\/principals\/users\/user1.vcf"}, ], "uid" : {"value" : "\/ucarddav\/principals\/users\/user1.vcf"},

"kind" : {"value" : "individual"},

"fn" : {"value" : "User, User1"},

"email" : [ {"value" : "user1@…"}, ], "caladruri" : {"value" : "mailto:user1@…"},

}, { "version" : {"value" : "4.0"},

"rev" : {"value" : "20090128185914Z"},

"source" : [ {"value" : "\/ucarddav\/principals\/users\/user2.vcf"}, ], "uid" : {"value" : "\/ucarddav\/principals\/users\/user2.vcf"},

"kind" : {"value" : "individual"},

"fn" : {"value" : "User, User2"},

"email" : [ {"value" : "user2@…"}, ], "caladruri" : {"value" : "mailto:user2@…"},

}

]

}

}

=== Two other quick notes:

We had to fall back on FormatItem() rather than FormatMatch() even though the latter was defined.

It would be great to parameterize the query (rather than just sending "q") as some won't have control over the parameter name.

Thanks for the excellent work!

Arlen

[johnsa]

Ugh - what a formatting mess...hit publish before preview (argh). Sorry about that. Here's the code again:

The changes we made were on lines 451 - 452 on jquery.autocomplete.js :

  // loop through the array and create a lookup structure
  for ( var i = 0, ol = options.data.length; i < ol; i++ ) {
    var rawValue = options.data[i];

became

  // loop through the array and create a lookup structure
  for ( var i = 0, ol = data.length; i < ol; i++ ) {
    var rawValue = data[i];

We instantiated the plugin with the following code:

var options = {
  minChars: 0,
  width: 310,
  matchContains: false,
  autoFill: false,

  extraParams: {
    format: 'json'
  },

  dataType: 'json',

 // our parse function maps our json object to the expected data structure for use with autocomplete
  parse: function(data) {
    var parsed = [];
    data = data.microformats.vcard;
    for (var i = 0; i < data.length; i++) {
      dataRow = {
        fn: data[i].fn.value,
        email: data[i].email[0].value,
        uri: data[i].caladruri.value,
        type: data[i].kind.value
      };
      parsed[i] = {
        data: dataRow,
        value: data[i].fn.value,
        result: data[i].email[0].value
      };
    }
    return parsed;
  },
  formatItem: function(item) {
      return " \"" + item.fn + "\" [" + item.email + "]";
  },

  formatMatch: function(item) {
      return " \"" + item.fn + "\" [" + item.email + "]";
  },
  formatResult: function(item) {
    return item.email;
  }
};

jQuery(document).ready(function($) {
  $('#bwRaUri').autocomplete("url-to-carddav-server-went-here", options)
});

and the data returned looks something like this:

{
  "microformats": {
    "vcard": [
      {
      "version" : {"value" : "4.0"},
      
      "rev" : {"value" : "20090128184009Z"},
      
      "source" : [      {"value" : "\/ucarddav\/principals\/users\/user1.vcf"},
      ],
      "uid" : {"value" : "\/ucarddav\/principals\/users\/user1.vcf"},
      
      "kind" : {"value" : "individual"},
      
      "fn" : {"value" : "User, User1"},
      
      "email" : [      {"value" : "user1@mysite.edu"},
      ],
      "caladruri" : {"value" : "mailto:user1@mysite.edu"},
      
      },
      {
      "version" : {"value" : "4.0"},
      
      "rev" : {"value" : "20090128185914Z"},
      
      "source" : [      {"value" : "\/ucarddav\/principals\/users\/user2.vcf"},
      ],
      "uid" : {"value" : "\/ucarddav\/principals\/users\/user2.vcf"},
      
      "kind" : {"value" : "individual"},
      
      "fn" : {"value" : "User, User2"},
      
      "email" : [      {"value" : "user2@mysite.edu"},
      ],
      "caladruri" : {"value" : "mailto:user2@mysite.edu"},
      
      }
    ]
  }
}

[dmethvin]

This is not a jQuery core bug. Please use the jQuery forums or contact the author via the method they request. For jQuery UI plugins, please file a bug on ​http://dev.jqueryui.com .