JSFiddle - React, Tailwind, and code Playground

by thugsb

HTML

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

JavaScript

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

  var results = new Bloodhound({
    datumTokenizer: function(data) {
      return Bloodhound.tokenizers.whitespace(d.value)
    },
    queryTokenizer: Bloodhound.tokenizers.obj.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&callback=showResults&duffCallback=?",
      ajax: $.ajax({type:'GET',dataType:'jsonp',jsonp:'duffCallback'}),
      filter: showResults
    }
  });

  results.initialize()

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