JSFiddle - React, Tailwind, and code Playground

by Oussama Ben Mahmoud

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>
<link rel="stylesheet" href="//code.cloudcms.com/alpaca/1.5.14/bootstrap/alpaca.min.css">
<script src="//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.11.1/typeahead.bundle.min.js"></script>
<div id="field7"></div>

JavaScript

$("#field7").alpaca({
  "schema": {
    "type": "string"
  },
  "options": {
    "type": "text",
    "id": "companyField",
    "label": "Company Name",
    "helper": "Select the name of a cloud computing company"
  }
});

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');
    
    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var companies = ["Cloud CMS", "Amazon", "HubSpot"];

$('#companyField').typeahead({
  hint: true,
  highlight: true,
  minLength: 2
}, {
  name: 'companies',
  source: substringMatcher(companies)
});