无法让 typeahead.js 基本示例正常工作答案

【问题标题】：Cannot get typeahead.js basic example to work无法让 typeahead.js 基本示例正常工作
【发布时间】：2014-03-28 11:26:21
【问题描述】：

我正在从http://twitter.github.io/typeahead.js/examples/ 复制“基础”示例并且无法让它在纯 HTML 页面中工作。

事实上，我已经尝试了许多来自网络的代码示例，但似乎没有一个可以工作。这让我觉得我使用了不正确的脚本库版本（见下文）。

这是我的代码中的“基础”示例：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />
    <script src="bootstrap.min.js" />
    <script src="typeahead.js" />

    <script>

        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)) {
                        // the typeahead jQuery plugin expects suggestions to a
                        // JavaScript object, refer to typeahead docs for more info
                        matches.push({ value: 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',
           displayKey: 'value',
           source: substringMatcher(states)
        });

</script>
</head>

<body>

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

</body>
</html>

当我运行上面的代码时，当我在文本框中输入时没有任何反应。

我的脚本引用是否正确？如您所见，我正在引用 jQuery 的 v1.11.0。我的 bootstrap.min.js 本地版本是 v3.1.1。我的 typeahead.js 本地版本是 0.10.2

我已经在 IE9 和 Chrome 22.x 中尝试过

非常感谢您的帮助。

马丁

【问题讨论】：

那你是怎么解决的...？
脚本块的第一行（以及示例）中缺少以下内容。我的 jQuery 不是那么好！ $(document).ready(function () {

标签： asp.net typeahead.js

【解决方案1】：

脚本块（以及示例）中缺少以下第一行。我的 jQuery 不是那么好！

<script>

  $(document).ready(function () {

    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)) {
                    // the typeahead jQuery plugin expects suggestions to a
                    // JavaScript object, refer to typeahead docs for more info
                    matches.push({ value: 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',
       displayKey: 'value',
       source: substringMatcher(states)
    });
 }

【讨论】：

【解决方案2】：

我创建了一个jsfiddle，它使用来自 cdnjs 的 typeahed 并且似乎可以工作。我知道有一个旧版本，但这个版本是 0.10.2，正如你提到的那样。

//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.2/typeahead.bundle.min.js

【讨论】：