我是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">
我想在搜索时获得电影名称作为建议
答案 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>