无法从typeahead.js中的api获取确切结果

时间:2019-09-20 12:20:00

标签: jquery typeahead.js

我是jquery插件的新手,我试图使用typeahead.js插件从tmdb api获取动态搜索结果,但我不知道为什么它没有得到任何帮助将不胜感激

我从此人的js小提琴中获取了此代码


   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 :(得分:0)

@{
    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>