Не могу получить точный результат из API в typeahead.js - PullRequest
Новая
       22

Не могу получить точный результат из API в typeahead.js

0 голосов
/ 20 сентября 2019

Я новичок в плагинах jquery. Я пытался использовать плагин typeahead.js для получения результатов динамического поиска из API-интерфейса tmdb, но я не знаю, почему он не дает результатов, любая помощь будет более ценной.

Я получил этот код от js fiddle этого человека 


   var movies = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=8360d0e72a693c7b24f696ce1b7e6268',
        filter: function (movies) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(movies.results, function (movie) {
                return {
                    value: movie.original_title
                };
            });
        }
    }
});

// Initialize the Bloodhound suggestion engine
movies.initialize();

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
    displayKey: 'value',
    source: movies.ttAdapter()
});

//html code 
   <input class="typeahead">

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

1 Ответ

0 голосов
/ 27 сентября 2019 
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index6</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/typeahead.bundle.js"></script>
    <script type="text/javascript">
        $(function () {
            var items = [];

            $.get('http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=8360d0e72a693c7b24f696ce1b7e6268', function (data) {
                $.each(data.results, function (key, val) {
                    items.push(val.original_title);
                });
            });

            //https://twitter.github.io/typeahead.js/examples/
            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)) {
                            matches.push(str);
                        }
                    });

                    cb(matches);
                };
            };

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

        });
    </script>

</head>
<body>
    <div id="the-basics">
        <input class="typeahead" type="text" placeholder="Movies">
    </div>
</body>
</html>
...