Question

我正在复制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中试过

非常感谢任何帮助。

马丁

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

Answer 2

我创建了一个jsfiddle，它使用cdnjs中的typeahead，似乎可行。我知道有一个旧版本，但是这个版本是0.10.2，正如你提到的那样。

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

无法获得typeahead.js基本示例

2 个答案: