Autocompleter.JsonP

docs

This adds support for our JsonP class. This example hits the CNET API and, because that data has a very esoteric format, I have to configure a lot of the class with code to handle that format.

Execute the script below and then type something like "ipod" into the input above.

new Autocompleter.JsonP($('jsonp'), 'http://api.cnet.com/restApi/v1.0/techProductSearch',
{
  jsonpOptions: {
    //this data gets added to the query string using JsonP's options
    data: {
      viewType: 'json',
      partKey: '19926949750937665684988687810562', //this is my code, user your own!
      iod:'none',
      start:0,
      results:10
    }
  },
  //require at least a key stroke from the user
  minLength: 1,
  //because the data returned has a unique structure, we must manage the parsing ourselves
  filter: function(resp) {
		dbug.log(resp);
    try {
      //this structure is unique to the CNET API
      choices = resp.CNETResponse.TechProducts.TechProduct;
			dbug.log(choices);
      //test it
      if(!choices || choices.length == 0) return [];
      //filter it and return it
      return choices.filter(function(choice){
        return (choice.Name.$.test(this.queryValue, 'i') || choice['@id'].test(this.queryValue), 'i');
      }.bind(this));
    } catch(e){'filterResponse error: ', dbug.log(e)}
  },
  injectChoice: function(choice) {
    //again, the structure of these items is unique to the CNET API
    if(! choice.Name.$)return;
    var el = new Element('li').set('html', this.markQueryValue(choice.Name.$+' - '+choice['@id']));
    el.inputValue = choice.Name.$+' - '+choice['@id'];
    this.addChoiceEvents(el).inject(this.choices);
  }
});