在MVC视图中未显示Typeahead + Bloodhound下拉列表

时间:2016-12-22 16:59:13

标签: javascript jquery asp.net-mvc twitter-bootstrap-3 typeahead.js

在无法使用我自己的本地api产生任何结果后,我尝试直接在我的项目中使用this answer中的示例:

// Instantiate the Bloodhound suggestion engine
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=470fd2ec8853e25d2f8d86f685d2270e',
        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, {
    // Use 'value' as the displayKey because the filter function 
    // returns suggestions in a javascript object with a variable called 'value'
    displayKey: 'value',
    source: movies.ttAdapter()
});

当我输入给定的输入时,我可以在“网络”选项卡中看到对远程API的请求实际上已经通过,但是下拉列表没有显示 - 这是完全相同的代码。举个例子,但它的工作方式不同。

  • 控制台中没有错误
  • 我尝试删除我自己输入的任何可能与Typeahead发生脚本/样式冲突的类/ ID

我正在使用jquery 3.1.1和bootstrap 3.3.7与Typeahead.bundle.js 0.11.1

我在哪里可以开始寻找确定建议的下拉列表实际上没有出现的原因?

编辑: 我现在意识到我遗漏了一些可能很重要的东西:这是在'脚本'部分的MVC视图中。脚本部分正在页面顶部呈现,此部分中的其他javascript正在执行 - 但是,应该应用此脚本的.typeahead框在局部视图中。也许我只是把事情放错了。

0 个答案:

没有答案