function substringMatcher(terms) {
            return function findMatches(query, callback) {
                var matches, substringRegex;
                query = escape(query);
                matches = [];
                var typeaheadSelectedTermValues = [];

                $.each($resultsContainer.find('#selectTypeaheadFormResults option'), function(index, result){
                    typeaheadSelectedTermValues.push(result.value);
                });
                if (options.matcherType === 'startsWith') {
                    query = '^' + query;
                } else if (options.matcherType === 'endsWith') {
                    query = query + '$';
                }

                substringRegex = new RegExp(query, 'i');

                $.each(terms, function(i, term) {
                    if (substringRegex.test(term.text)) {
                        if ($.inArray(String(term.value), typeaheadSelectedTermValues) === -1) {
                            matches.push(term);
                        }
                    }
                });
                callback(matches);
            };
        }

If the user wants to provide their own function instead, the customMatcher option should be set to true and the function should be passed to the matcher option. The new custom function should be following the same format as the default one. The built-in matcher was heavily influenced by the examples provided in Twitter Typeahead.js` documentation, since that plugin is the backbone of TypeIO.

TypeIO uses a resultsContainer that the user provides to store results. The container can be any block element with an id attribute. Inside of the container, TypeIO creates two elements, a visible <ul>, and an invisible <select>. The <ul> is used to hold the visible results that the user sees. The <select> holds the same selected data, but is invisible and is added to support form submissions. The example below shows how TypeIO renders in the background (markup) two results selected - Arizona and Massachusetts:

<div id="resultsContainer">
    <ul>
        <li>Arizona</li>
        <li>Massachusetts</li>
    </ul>
    <select class="hide">
        <option>Arizona</option>
        <option>Massachusetts</option>
    </select>
</div>