Как использовать typeahead? - PullRequest
Новая
       34

Как использовать typeahead?

0 голосов
/ 08 ноября 2019

Я пытаюсь использовать twitter typeahead.js в моем приложении laravel. Это не работает (без ошибок, но в моем поле ничего не отображается).

Поэтому я решил создать простой 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/

1 Ответ

2 голосов
/ 08 ноября 2019

Я думаю, что проблема вызвана версиями библиотек, которые вы используете в скрипте.

В примерах typeahead они используют jQuery 1.10.2, в то время как вы используете более продвинутую версию.

Кроме того, вы используете плагин jquery.typeahead.min.js, который, кажется, не совпадает с плагином typeahead.jquery.js, который используется на страницах документации typeahead (обратите внимание на изменение порядка имен плагинов).

Я создал этот jsfiddle , в котором я только изменил эти библиотеки, и он работает правильно.

...