Javascript 使用typeahead.js从MovieDB中提取更多信息，并将其放入其他输入中

我正在使用typeahead.js从MovieDB api获取电影信息。我需要在用户键入电影标题时，自动将电影的年份和ID添加到其他输入中

因此，当用户使用输入的电影标题并单击建议的标题时，它会自动将年份和电影id添加到其他输入中

var movies = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    remote: {
        url: 'http://api.themoviedb.org/3/search/movie?api_key=470fd2ec8853e25d2f8d86f685d2270e&query=%QUERY&search_type=ngram',
        filter: function (movies) {
            // Map the remote source JSON array to a JavaScript array
            return $.map(movies.results, function (movie) {
                    return {
                        id: movie.id,
                        value: movie.original_title,
                        year: (movie.release_date.substr(0,4) ? movie.release_date.substr(0,4) : '')
                    };
                });
            }
        }
    });

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

// Instantiate the Typeahead UI
$('.typeahead').typeahead({
    hint: true,
    highlight: true
}, {
    displayKey: 'value',
    source: movies.ttAdapter(),
    templates: {
    empty: [
        '<div class="empty-message">',
        'unable to find any Best Picture winners that match the current query',
        '</div>'
    ].join('\n'),
    suggestion: Handlebars.compile('<p><strong>{{value}}</strong> – {{year}}</p>')
}

});

HTML代码

JS代码 靠近返回（第12行）查看，有需要传输到其他输入的信息

var movies = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    remote: {
        url: 'http://api.themoviedb.org/3/search/movie?api_key=470fd2ec8853e25d2f8d86f685d2270e&query=%QUERY&search_type=ngram',
        filter: function (movies) {
            // Map the remote source JSON array to a JavaScript array
            return $.map(movies.results, function (movie) {
                    return {
                        id: movie.id,
                        value: movie.original_title,
                        year: (movie.release_date.substr(0,4) ? movie.release_date.substr(0,4) : '')
                    };
                });
            }
        }
    });

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

// Instantiate the Typeahead UI
$('.typeahead').typeahead({
    hint: true,
    highlight: true
}, {
    displayKey: 'value',
    source: movies.ttAdapter(),
    templates: {
    empty: [
        '<div class="empty-message">',
        'unable to find any Best Picture winners that match the current query',
        '</div>'
    ].join('\n'),
    suggestion: Handlebars.compile('<p><strong>{{value}}</strong> – {{year}}</p>')
}

});

var movies=新猎犬({
datumTokenizer:函数（数据）{
return Bloodhound.tokenizers.whitespace（datum.value）；
},
queryTokenizer:猎犬，标记，空白，
限额：10，
远程：{
网址：'http://api.themoviedb.org/3/search/movie?api_key=470fd2ec8853e25d2f8d86f685d2270e&query=%QUERY&search_type=ngram',
过滤器：功能（电影）{
//将远程源JSON数组映射到JavaScript数组
返回$.map（movies.results，函数（movie）{
返回{
id:movie.id，
值：movie.original_title，
年份：（电影。发行日期。substr（0,4）？电影。发行日期。substr（0,4）：“”）
};
});
}
}
});
//初始化警犬建议引擎
初始化（）；
//实例化Typeahead UI
$（'.typeahead'）。typeahead({
提示：没错，
推荐理由：没错
}, {
displayKey:'值'，
来源：movies.ttAdapter（），
模板：{
空的：[
'',
“找不到任何与当前查询匹配的最佳图片获奖者”，
''
].join（'\n'），
建议：handlebar.compile（“{{{value}}-{{year}}
”）
}
});

下面是我在JSFIDLE上运行的代码，供您自己试用：

---

我在此处添加了一种自动填充相关输入控件的方法：

实现自动填充的代码的关键部分是：

bind("typeahead:selected", function (obj, datum, name) {
 $('.year').val(datum.year);
 $('.id').val(datum.id);
});

---

此代码指定了在选择typeahead值时应调用的函数，在这种情况下，它会适当地设置年份和id输入的值。

非常感谢，如果用户单击输入时已经有这样的值，它会自动打开建议列表吗（模拟向下箭头键）因此，他可以点击标题并获得其他输入的额外信息。没有问题。你应该为你在评论中要求的内容创建一个单独的问题，因为它实际上与这个问题无关。这非常有帮助！我正在努力找到如何做到这一点，而文档中没有给出任何类似于绑定的示例。