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)
});

Line 3 on the-basics.js

substringRegex should be renamed to substrRegex

Otherwise error occurs when using strict mode:

ReferenceError: assignment to undeclared variable substrRegex'

Basically the same as rewmike's comment.

Line 9 creates a global variable substrRegex rather than assigning a value to the local variable substringRegex

Fixed. Thanks for the heads up.

What is the license of this example? Same as the license of typeahead.js?

It says license MIT at the top of the page

The latest revision re-introduced the accidental global issue that rewmike and eddieh pointed out.

Hi,

This example doesn't work for me. Does anyone know where the style class "typeahead" resides? Or are there any working examples with this version of typeahead 0.11.1? The only typeahead which works for me is hosted somewhere else: http://mycodde.blogspot.de/2013/12/typeaheadjs-autocomplete-tutorial-ajax.html
And uses an older version.

Thanks!

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... ;)