Using Typeahead with Google Custom Search Engine

http://stackoverflow.com/questions/23394245/using-typeahead-with-google-custom-search-engine

by Ben Smith

HTML

<script src="https://www.slc.edu/core/v5.0/js/plugins/typeahead.bundle.js"></script>
<body>
    <input name="q" id="gq" />
</body>

JavaScript

var showResults = function (data) {
    var arr = $.map(data[1], function (item) {
        return {
            value: item[0]
        };
    });
    console.log(arr);
    return arr;
};

var results = new Bloodhound({
    datumTokenizer: function (data) {
        return Bloodhound.tokenizers.whitespace(data.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: "http://clients1.google.com/complete/search?client=partner&hl=en&sugexp=gsnos%2Cn%3D13&gs_rn=25&gs_ri=partner&partnerid=004914516364918182382%3Ayfqw09r4qvu&types=t&ds=cse&cp=3&gs_id=15&q=%QUERY",
        ajax: {
            type: 'GET',
            dataType: 'jsonp'
        },
        filter: showResults
    }
});

results.initialize();

$('#gq').typeahead(null, {
    name: 'results',
    displayKey: 'value',
    source: results.ttAdapter()
});