Autocompleter. JsonP.js

Implements JsonP support for the Autocompleter class.

Arguments

Options

Example

Let’s say the user is typing into an input to search for ipods and you need to take what they’ve typed (“ipo” so far) and send it to a server to get back filtered results like so:

http://server.com/handler.jsp?query=ipo

Then the postVar option would be “query” so that the user’s input is mapped to this key in the query string.

var myCompleter = new Autocomplete.JsonP($('myinput'), 'http://server.com/handler.jsp', {
    postVar: 'query'
    ...
});

You’re not really done though, because you need to handle the results that come back using the functionality in the base Autocompleter class.  Here’s an example that will work with the cnet API

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,
    //this function filters the results based on the input
    filterResponse: function(resp) {
        //test it
        if(!choices || choices.length == 0) return [];
        //filter it and return it
        var regex = new RegExp('^' + (this.queryValue || '').escapeRegExp(), 'i');
        return choices.filter(function(choice){
            return (regex.test(choice.Name.$) || regex.test(choice['@id']));
        });
    },
    useSelection: false,
    //because the data returned has a unique structure, we must manage the parsing ourselves
    filterResponse: function(resp) {
        try {
            //this structure is unique to the CNET API
            choices = resp.CNETResponse.TechProducts.TechProduct;
            //test it
            if(!choices || choices.length == 0) return [];
            //filter it and return it
            return choices.filter(function(choice){
                return (choice.Name.$.test(this.getQueryValue(), 'i') || choice['@id'].test(this.getQueryValue()), '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')
            .setHTML(this.markQueryValue(choice.Name.$))
            .adopt(new Element('span', {'class': 'example-info'}).setHTML(this.markQueryValue(choice['@id'])));
        el.inputValue = choice.Name.$+' ('+choice['@id']+')';
        this.addChoiceEvents(el).injectInside(this.choices);
    }
});