[jQuery] Re: Autocomplete and JSON

[Ashley]

This is possible but a bit difficult with the plugin. I wish it were
easier as I don't think there is yet a jQuery autocomplete that
competes with those from other packages like YUI.

You have to override the 'parse' and 'formatItem' functions. Here is
an example of it that I'm using.

  var autocompleteJSON = function(raw) {
     var json = typeof(raw) === "array" ? raw : raw.resultSet;
     var parsed = [];
     for (var i=0; i < json.length; i++) {
        var row = json[i];
        parsed.push({
            data: row,
           value: row["title"] + ' [' + row["id"] + ']',
          result: row["title"]
        });
     }
     return parsed;
  };

  $("input[name='parent_autocomplete']").result(function(event, data,
formatted){
      $("input[name='parent']").val(data["id"]);
  });

  $("input[name='parent_autocomplete']")
    .autocomplete("/cat/admin/page/search",
                  { width: "inherit"
                   ,minChars:3
                   ,extraParams: {"id":6 }
                   ,max: 25
                   ,delay: 900
                   ,dataType: "json"
                   ,parse: autocompleteJSON
                   ,formatItem: function(row) { return row["title"] }
                   ,mustMatch: true
                   ,selectFirst: false
                 });

Where the JSON coming back from the server looks like:

{"resultSet":[{"id":"3","title":"Green Services"},
{"id":"5","title":"Green Living Guides"}]}

You can match up the format against the autocompleteJSON parsing
function to see what's going on.

It's always best to wrap your JSON in an object {} and not just an
array []. In an array the data can be visible to hacking on certain
browsers (just FF, I think).

-Ashley