文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用typeahead？

问如何使用typeahead？
EN

Stack Overflow用户

提问于 2019-11-09 01:17:42

回答 1查看 96关注 0票数 0

我正试着在我的laravel应用中使用twitter typeahead.js。它不工作(没有错误，但在我的字段下没有显示任何内容)。

因此，我决定将其转换为一个简单的html文件，其中只包含库和示例(https://twitter.github.io/typeahead.js/examples/)进行测试。这也不起作用。

我快疯了:/是不是有什么明显的东西我没看到？

这是我的代码：

<html>

<head>

    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.min.css"
        integrity="sha256-CU0/rbxVB3Eixd3bbIuJxHJLDnXriJS9cwp/BfcgpLw=" crossorigin="anonymous" />
</head>

<body>

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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.min.js"
        integrity="sha256-W+Cxk9exgjON2p73M4RcoKvCpQUZ+IjXhEzZk6rlg9M=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/bloodhound.min.js"
        integrity="sha256-WJlyUMyJDhWTumC7/oaAtXFRBh0rZGc7qT80egxJafw=" crossorigin="anonymous"></script>

    <script>



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

        // constructs the suggestion engine
        var states = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.whitespace,
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            // `states` is an array of state names defined in "The Basics"
            local: states
        });

        $('#bloodhound .typeahead').typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        },
            {
                name: 'states',
                source: states
            });

    </script>
</body>

</html>

测试链接：https://jsfiddle.net/rxybp8de/2/

javascript

typeahead.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-11-09 03:05:23

我认为这个问题是由你在小提琴中使用的库版本引起的。

在typeahead示例中，他们似乎使用的是jQuery 1.10.2，而您使用的是更高级的版本。

此外，您使用的jquery.typeahead.min.js插件似乎与typeahead文档页面中使用的typeahead.jquery.js插件不同(请注意插件名称顺序的变化)。

我构建了这个jsfiddle，我只在其中更改了这些库，它可以正常工作。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58771136

复制

相似问题

问如何使用typeahead？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用typeahead？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用typeahead？
EN