TypeAhead没有't显示查询结果
TypeAhead doesn't show query results
我非常绝望!
我对Bootstrap Typeahead有这个问题。
HTML标记:
<div class="form-group">
<label for="">Recipients</label>
<input id="recipients" name="recipients"
autocomplete="off"
class="form-control"
data-role="tagsinput">
</div>
JavaScript:
$('#recipientsContainer').tagsinput({
allowDuplicates: false,
trimValue: true,
confirmKeys: [13, 44],
typeahead: {
hint: true,
highlight: true,
minLength: 4,
limit: 10,
source: function (query) {
$.ajax({
url: "/app/route",
type: 'POST',
dataType: 'JSON',
data: {'query' : query},
success: function(data) {
console.log(data);
return(data);
}
});
},
afterSelect: function() {
this.$element[0].value = '';
}
}
});
Ajax调用后,我在控制台中得到了这个数组:
["Justin Demetria +393281893574", "Dylan Alea +393700488191", "Zahir Tatyana +393007841301", "Ryan Veda +393542236060", "Hunter Wanda +393393156943"]
问题是:我什么都没看到:(什么都没出现。打字不起作用。
在控制台中,我得到这个错误
bootstrap-tagsinput.js Uncaught TypeError: Cannot read property 'success' of undefined.
我该怎么修?
我使用的是Bootstrap 3,最后一个Typeahead js源代码。
$('#recipientsContainer').tagsinput({
allowDuplicates: false,
trimValue: true,
confirmKeys: [13, 44],
typeahead: {
source: function(queryForHints) {
if (queryForHints.length < 4)
return '';
var parameters = {'queryForHints': queryForHints};
jQuery.ajax({
url: "/app/route",
data: parameters,
type: "POST",
dataType: "json",
success: function(data) {
var sourceData = [];
for (var i = 0; i < data.length; i++) {
sourceData.push(data[i].text);
}
return (sourceData);
},
error: function(data) {
console.log("error for xxxxx/xxxxx");
},
async: true
});
}
}
});
但错误依然存在:
bootstrap-tagsinput.js:331 Uncaught TypeError: Cannot read property 'success' of undefined
错误出现在bootstrap-tagsinput.js的第331行,我发现:
if ($.isFunction(data.success)) {
// support for Angular callbacks
data.success(processItems);
我们能解决这个问题吗?
在我看来,问题是输入标记无法理解ajax调用
的SUCCESS对于typeahead,使用Bloodhound获取数据,而不是ajax。
你的代码应该像这样:
var customers = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/customers?query=%QUERY',
wildcard: '%QUERY'
}
});
$('#customer').typeahead({
minLength: 3,
highlight: true
}, {
name: 'customers',
display: 'name',
source: customers
}).on("typeahead:select", function(e, customer) {
vm.customerId = customer.id;
});
有关Bloodhound的更多信息:Bloodhound@github
这里有一些typeahead的例子:typeahead例子
相关文章:
- 当查询不在displayField中时,引导Ajax Typeahead不显示结果
- 使用按钮和媒体查询切换显示状态
- 菜单更改时仍显示@media查询
- onchange选择get value并执行查询,然后在同一页面上显示结果
- 使用jquery显示mysql查询结果
- 问题 - 在查询加载器 2 加载页面之前显示 1 秒的页面
- j查询用户界面按钮未显示
- j查询地理位置和地图突出显示
- 如何显示查询回调数据结果仅从开始
- 显示查询输出 HTML 中的图像
- 在控制台.log中显示查询的 [对象对象] 的字段
- 通过使用Fusion Table Layer平移和缩放以显示查询结果
- jquery/ajax以用户输入为条件运行php查询,然后显示查询结果而不刷新页面
- 如何在html选项框中显示查询结果
- Cloudboost.初学者.如何显示查询示例
- 使用php和ajax在表中显示查询中的值
- TypeAhead没有't显示查询结果
- 使用jquerybuilder显示查询
- 显示查询字符串 asp.net
- 突出显示查询在jQuery自动完成动态列表源