JSFiddle - React, Tailwind, and code Playground

by Oussama Ben Mahmoud

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>
<link rel="stylesheet" href="http://code.cloudcms.com/alpaca/1.5.14/bootstrap/alpaca.min.css">
<script src="http://code.cloudcms.com/alpaca/1.5.14/bootstrap/alpaca.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/bloodhound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/typeahead.bundle.min.js"></script>
<div id="field7"></div>

JavaScript

var data = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('key'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'http://smart-api.info/api/suggestion/?field=services.inputParameter.parameterDataType',
    filter: function(data) {
      // Map the remote source JSON array to a JavaScript object array
      return $.map(data.field_values.buckets, function(bucket) {
        return {
          value: bucket.key
        };
      });
    }
  }
});

data.initialize();

$("#field7").alpaca({
  "schema": {
    "type": "string"
  },
  "options": {
    "type": "text",
    "label": "Input Parameter DataType",
    "helper": "Select the name of the input parameter data type",
    "typeahead": {
      "config": {
        "autoselect": true,
        "highlight": true,
        "hint": true,
        "minLength": 1
      },
      "datasets": {
        "name": "data",
        "displayKey": 'value',
        "source": data.ttAdapter()
      }
    }
  }
});