如何使用预先输入?

问题描述 投票:0回答:1

我正在尝试在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个回答
1
投票

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

在预输入示例中,当您使用更高级的版本时,它们似乎使用jQuery 1.10.2。

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

我建立了这个jsfiddle,在其中只更改了那些库,即可正常运行。

© www.soinside.com 2019 - 2024. All rights reserved.