选择时 Typeahead 输入未定义
twitter Typeahead input goes undefined when selecting
我有一个 typeahead 工作正常,但是当我 select 一个条目时,输入充满了 "undefined"
知道为什么吗?是否有 "selecting" 事件或我可以用来用当前 selected 值填充输入的东西?我没有在网上找到有关此行为的任何信息。
这是提前声明:
$('.receivers-input').typeahead({
minLength: 0,
}, {
source: function (query, cb) {
var Request = $.ajax({
methode: "POST",
url: "MessagingService.svc/UserAutocomplete",
dataType: "json",
contentType: "application/json; charsert=utf-8",
data: JSON.stringify({ "inputString": query })
}).done(function (Response) {
if (!Response.UserAutocompleteResult.success) {
if (!Response.UserAutocompleteResult.message)
return;
ErmesManager.notify(Response.UserAutocompleteResult.message, null);
return;
}
cb(Response.UserAutocompleteResult.d);
});
},
templates: {
suggestion: function (suggestion) {
return '<p>' + suggestion + '</p>';
}
}
}).on('typeahead:selected', function (event, data) {
$('.receivers-input').val('');
ComputeToken(data, true);
}).on('blur', function (event, data) {
$('.receivers-input').val(data);
});
}
添加 on('typeahead:cursorchanged', function (event, data) {});
即可。
另外,因为我使用 placeholder
显示有点乱。我通过在 tt-hint class.
上添加 visibility: hidden
来清理它
这里是完整的修改:
CSS :
.tt-hint {
visibility: hidden;
}
Javascript :
...
}).on('typeahead:selected', function (event, data) {
$('.receivers-input.tt-input').val('');
ComputeToken(data, true);
}).on('blur', function () {
$('.receivers-input.tt-input').val('');
}).on('typeahead:cursorchanged', function (event, data) {
$('.receivers-input.tt-input').val(data);
});
未记录 cursorchanged 事件 here,如果有人有其他文档来源,我很乐意提供。
我要补充一点,这个问题和答案是在旧的 bootstrap 版本上下文中。使用最新版本(目前)typeahead:select 也可以做到这一点。
我有一个 typeahead 工作正常,但是当我 select 一个条目时,输入充满了 "undefined"
知道为什么吗?是否有 "selecting" 事件或我可以用来用当前 selected 值填充输入的东西?我没有在网上找到有关此行为的任何信息。 这是提前声明:
$('.receivers-input').typeahead({
minLength: 0,
}, {
source: function (query, cb) {
var Request = $.ajax({
methode: "POST",
url: "MessagingService.svc/UserAutocomplete",
dataType: "json",
contentType: "application/json; charsert=utf-8",
data: JSON.stringify({ "inputString": query })
}).done(function (Response) {
if (!Response.UserAutocompleteResult.success) {
if (!Response.UserAutocompleteResult.message)
return;
ErmesManager.notify(Response.UserAutocompleteResult.message, null);
return;
}
cb(Response.UserAutocompleteResult.d);
});
},
templates: {
suggestion: function (suggestion) {
return '<p>' + suggestion + '</p>';
}
}
}).on('typeahead:selected', function (event, data) {
$('.receivers-input').val('');
ComputeToken(data, true);
}).on('blur', function (event, data) {
$('.receivers-input').val(data);
});
}
添加 on('typeahead:cursorchanged', function (event, data) {});
即可。
另外,因为我使用 placeholder
显示有点乱。我通过在 tt-hint class.
visibility: hidden
来清理它
这里是完整的修改:
CSS :
.tt-hint {
visibility: hidden;
}
Javascript :
...
}).on('typeahead:selected', function (event, data) {
$('.receivers-input.tt-input').val('');
ComputeToken(data, true);
}).on('blur', function () {
$('.receivers-input.tt-input').val('');
}).on('typeahead:cursorchanged', function (event, data) {
$('.receivers-input.tt-input').val(data);
});
未记录 cursorchanged 事件 here,如果有人有其他文档来源,我很乐意提供。
我要补充一点,这个问题和答案是在旧的 bootstrap 版本上下文中。使用最新版本(目前)typeahead:select 也可以做到这一点。