如何使用 Twitter Typeahead 显示远程结果?
How to display remote results with Twitter Typeahead?
我想将 Twitter Typeahead 与远程数据库数据源一起使用。我设法从我的 .php 文件中 return 获得结果
returnjson_encode($results);
格式如下:
["chrome"、"test01"、"test02"、"wddwde"]。
但我不知道如何让它们显示为建议?
为了比较,我添加了预取的 'countries_bloodhound' 以及该变量的集成部分,它工作正常。我需要 'users_bloodhound' 及其集成方面的帮助。
var users_bloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
//name: 'users',
remote: {url:'./search.php?query=%QUERY',
wildcard: 'QUERY',
transform: function(response) {
// Map the remote source JSON array to a JavaScript object array
return $.map(response.results, function(user) {
return {
name: user
};
}
);}
},
limit: 10
});
var countries_bloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'https://cdn.rawgit.com/twitter/typeahead.js/gh-pages/data/countries.json',
filter: function (countries) {
return $.map(countries, function (country) {
return {
name: country
};
});
}
}
});
countries.initialize();
users_bloodhound.initialize();
$('#bloodhound .typeahead').typeahead({
highlight: true
}, {
name: 'users',
displayKey: 'name',
source: users_bloodhound.ttAdapter(),
templates: {
header: '<h4 class="search-name"><small>Users</small></h4>'
}},{
name: 'countries',
displayKey: 'name',
source: countries_bloodhound.ttAdapter(),
templates: {
header: '<h4 class="search-name"><small>Countries</small></h4>'
}
});
代码正确。我的 .php 文件有一些问题,因为我返回了结果而不是回应它们。
我想将 Twitter Typeahead 与远程数据库数据源一起使用。我设法从我的 .php 文件中 return 获得结果
returnjson_encode($results);
格式如下:
["chrome"、"test01"、"test02"、"wddwde"]。
但我不知道如何让它们显示为建议?
为了比较,我添加了预取的 'countries_bloodhound' 以及该变量的集成部分,它工作正常。我需要 'users_bloodhound' 及其集成方面的帮助。
var users_bloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
//name: 'users',
remote: {url:'./search.php?query=%QUERY',
wildcard: 'QUERY',
transform: function(response) {
// Map the remote source JSON array to a JavaScript object array
return $.map(response.results, function(user) {
return {
name: user
};
}
);}
},
limit: 10
});
var countries_bloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'https://cdn.rawgit.com/twitter/typeahead.js/gh-pages/data/countries.json',
filter: function (countries) {
return $.map(countries, function (country) {
return {
name: country
};
});
}
}
});
countries.initialize();
users_bloodhound.initialize();
$('#bloodhound .typeahead').typeahead({
highlight: true
}, {
name: 'users',
displayKey: 'name',
source: users_bloodhound.ttAdapter(),
templates: {
header: '<h4 class="search-name"><small>Users</small></h4>'
}},{
name: 'countries',
displayKey: 'name',
source: countries_bloodhound.ttAdapter(),
templates: {
header: '<h4 class="search-name"><small>Countries</small></h4>'
}
});
代码正确。我的 .php 文件有一些问题,因为我返回了结果而不是回应它们。