asp.net – 无法获得typeahead.js基本示例

发布时间：2020-12-16 06:27:49 所属栏目：asp.Net 来源：网络整理

导读：我正在复制 http://twitter.github.io/typeahead.js/examples/的“基础知识”示例并且不能让它在纯HTML页面中工作. 事实上,我已尝试过来自网络上的许多代码示例,但似乎都没有.这让我觉得我使用的是不正确版本的脚本库(见下文). 以下是我的代码中的“基础知

我正在复制 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不是那么好！

<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,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','Wyoming'
        ];

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!