Example for http://twitter.github.io/typeahead.js/examples/. License: MIT

the-basics.html

<div id="the-basics">
  <input class="typeahead" type="text" placeholder="States of USA">
</div>

the-basics.js

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 states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

$('#the-basics .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  source: substringMatcher(states)
});

This could be a lot simpler with $.grep

Hi,
It shows only 5 matches instead of all matched string. How to show all matches?

@jharding this is the updated working version, could you change yours to this?
https://gist.github.com/skycocker/382c76f696c50a165585

+1

I could only get this working after I added the handlebars script to the-basics.html page (after I did ViewSource on the examples page).
Is that correct, it doesn't seem the right way to me?

Hi all,
Example still contains some mistake with substrRegex variable.

var substringMatcher = function (strs) {
     return function findMatches(q, cb) {         
            // regex used to determine if a string contains the substring `q`
            var substringRegex = new RegExp(q, 'i');

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

            // 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 (substringRegex.test(str)) {
                    matches.push(str);
                }
            });

            cb(matches);
        };        
};

In this function:

• fixed usage of substringRegex variable;
• declaring variables moved exactly before usage.

Hi,
This example currently displays the result as "Undefined", as the value being pushed is a string, but it seems an object is expected in the format of [{value: "string1"}, {value: "string2"}, {value: "string3"}] according to this post on Stack Overflow. I have amended this in my fork, by changing the following on line 15 of the-basics.js:
matches.push(str);
to
matches.push({value: str});
Please feel free to merge this @jharding.

Thank you phily245! This small change resolve issue with "undefined" suggestions.
It's little strange that author publish as a first example code which not works... ;)