goog.ui.ac.AutoComplete with objects as data source

Question

I am trying to implement the autocomplete with data from a database.

The data looks like

[
  {"id":"1",name:"Jon"},
  {"id":"2",name:"Carl"},
  {"id":"3",name:"Jon"},
]

There is no example using such data even though this would be more common than selecting a string from a bunch of strings. Having the user select "Jon" doesn't mean anything unless you know the ID.

I was trying to add code to the following page and listen to an event when the user selects an item but first of all it's not documented in code and in the api what event that is and second none of the events seem to be triggered. Hopefully the event object would pass the object that was selected by the user (not the string) or the index of the selected item so I don't have to use access the private variable to get the object that was chosen.

ac1.dispose();
var DataItem = function(id,value){
  this.id=id;
  this.value=value;
};
DataItem.prototype.toString=function(){
  return this.value;
};
DataItem.prototype.valueOf=function(){
  return this.value;
};
var tcMovies = [
    new DataItem(1,"one"),
    new DataItem(2,"onetwo")
];
var ac1 = goog.ui.ac.createSimpleAutoComplete(
    tcMovies, document.getElementById('txtInput1'), false);


goog.events.listen(ac1,goog.ui.ac.AutoComplete.EventType.SELECT,
  function(e){
    //never gets called
    console.log(e);
    //hoping to get an index so I can do something like
    //  ac1.getMatcher().rows_[selectedindex].id
    //  probably should not use rows_ but there is no get
    //  method for that either
  }
);

Answer 1

Fiddling around a bit and looking through the source code I did find what hopefully is the way to implement it. The following comment in autocomplete.js would suggest it is the correct way:

  /**
   * Field value was updated.  A row field is included and is non-null when a
   * row has been selected.  The value of the row typically includes fields:
   * contactData and formattedValue as well as a toString function (though none
   * of these fields are guaranteed to exist).  The row field may be used to
   * return custom-type row data.
   */
  UPDATE: 'update',

Open the following page, press F12 and run the following code in the console.

//remove existing autocomplete
ac1.dispose();
//define data, need toString
//  to display the values
var DataItem = function(id,value){
  this.id=id;
  this.value=value;
};
DataItem.prototype.toString=function(){
  return this.value;
};
// create data
var tcMovies = [
    new DataItem(1,"abbbbbbbb"),
    new DataItem(2,"aabbbbbbb"),
    new DataItem(3,"aaabbbbbb"),
    new DataItem(4,"aaaabbbbb"),
    new DataItem(5,"aaaaabbbb"),
    new DataItem(6,"aaaaaabbb"),
];
// use easy method to create and attach the autocomplete
var ac1 = goog.ui.ac.createSimpleAutoComplete(
    tcMovies, document.getElementById('txtInput1'), false);

//listen to UPDATE
goog.events.listen(ac1,goog.ui.ac.AutoComplete.EventType.UPDATE,
  function(e){
    //e.row should be the selected value
    console.log("user selected",e.row);
  }
);