Question

我正在尝试使用Twitter typeahead.js制作自动填充文本框，但到目前为止只显示了文本框，没有自动填充框。但是，它在JSFiddle上运行正常，所以我假设JSFiddle如何包装东西正在解决幕后问题。

请注意，以下大部分内容都是直接来自typeahead.js'basics example。我现在只想尝试一个样本。此外，我正在使用Django，以防万一。

我的HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>States</title>
    </head>
    <body>

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

        <script src="/static/jquery.min.js"></script>
        <script src="/static/js/typeahead.bundle.js"></script>
        <script src="/static/js/state-autocomplete.js"></script>

    </body>
</html>

状态autocomplete.js：

$(document).ready(function () {

    var substringMatcher = function (strs) {
        console.log('in substringMatcher')
        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)
    });
});

jquery.min.css是v2.1.1（我在Chrome v35上运行），typeahead.bundle.js来自typeahead.js Github存储库。

到目前为止，我还尝试将脚本放在<head>标记中，重新排列<script>代码，然后使用和不使用$(document).ready()进行尝试。

我错过了什么/做错了什么？

Answer 1

你的JQuery JS文件是否在'js'文件夹中？您的路径在“静态”目录中引用它。当您尝试运行HTML + JS时，控制台是否会打印出任何内容？

代码在我的电脑上正常运行。您是否尝试更新资源的参考？我将您的代码复制并粘贴到HTML和JS文件中，并将对JQuery和TypeAhead的本地引用替换为下面的直接引用，它显示得很好。

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

Twitter Typeahead没有打开自动完成框

1 个答案: