Question

A friend of mine wrote some Google Closure code that contains an instance of goog.ui.AutoComplete: http://closure-library.googlecode.com/svn/docs/class_goog_ui_AutoComplete.html

Every time this autocomplete feature makes an asynchronous request to a server, I must loop through all the rows generated by the autocomplete and do something with each of them.

Right now, I am accomplishing this as follows.

var rows = friendsAutocomplete.rows_;
for (var i = 0; i < rows.length; i++) {
  doSomething(rows[i]);
}

This works, but is very bad since I am breaking abstraction barriers by accesing the private variable friendsAutocomplete.rows_. I also cannot add new methods or properties to friendsAutocomplete since my friend adamantly refuses to do so.

How can I loop through the rows generated by the autocomplete feature without accessing private variables?

Answer 1

1. Create your control

   var ac = new goog.ui.AutoComplete.RichRemote(“http://blah”, inputDomElement);

2. Create a handler for result

   So if blah Url returns a json like

   [
    ['apple',
     {name: 'Fuji', url: '..'},
     {name: 'Gala', url: '..'},
     {name: 'Golden Delicious',
      url: '..'}
    ],
    ['berry',
     {name: 'Strawberry', url: '..'},
     {name: 'Blueberry', url: '..'},
     {name: 'Blackberry',url: '..'}
    ]
   ]
   

you need to have javascript objects in the code which are processed fo each item in the top-level array object. I guess this is what you wanted (Note: ‘apple’ , ‘berry’ match the JSON result value)

    var apple = function (item) {
    ...
    return makeRichRow_(...)
    }

    var berry = function (item) {
    ...
    return makeRichRow_(...)
    }

and makeRichRow_ is basically where you attach a render function and select value for your item when the user selects an item. You can additionally filter the rows etc

This is a complete demo with source code.
http://code.google.com/p/closure-library/source/browse/trunk/closure/goog/demos/autocompleterichremote.html?r=43