Twitter Bootstrap typeahead:使用`this`获取上下文/调用元素
Twitter Bootstrap typeahead:使用`this`获取上下文/调用元素
提问于 2012-09-14 03:39:59
我使用的是Twitter Bootstrap 2.1.1的Typeahead组件和jQuery 1.8.1
我试图从typeahead的updater函数中访问文本框元素。以下是我当前的代码，它工作得很好：
$('#client-search').typeahead({
source: function (query, process) {
$.get(url, { query: query }, function (data) {
labels = [];
mapped = {};
$.each(data, function(i,item) {
mapped[item.label] = item.value;
labels.push(item.label);
});
process(labels);
});
}
,updater: function (item) {
$('#client-id').val(mapped[item]);
return item;
}
,items: 10
,minLength: 2
});我在同一个页面上有很多typeahead搜索框。每个搜索框都有一个id #xxx-search和一个对应的id为#xxx-id的隐藏输入。我想通过这样做来重用相同的代码：
$('#client-search, #endClient-search, #other-search').typeahead({
...
,updater: function (item) {
var target = $(this).attr('id').split('-')[0] + '-id';
$('#'+target).val(mapped[item]);
return item;
}
...我以为this会引用正在使用的文本框元素，但显然没有，因为我在firebug中得到了一个未定义的错误：
$(this).attr("id") is undefined当我使用this而不是$(this)时，我得到：
this.attr is not a function有没有人能帮上忙呢？
更新:答案，还有更多！
多亏了benedict_w下面的回答，现在不仅可以完美地工作，而且我还在可重用性方面做了很大的改进。
下面是我的<input>的样子：
<input type="text" autocomplete="off"
id="client-search"
data-typeahead-url="/path/to/json"
data-typeahead-target="client-id">
<input type="hidden" id="client-id" name="client-id">注意搜索框是如何引用隐藏的id的。下面是新的js：
$(':input[data-typeahead-url]').each(function(){
var $this = $(this);
$this.typeahead({
source: function (query, process) {
$.get($this.attr('data-typeahead-url'), { query: query }, function (data) {
labels = [];
mapped = {};
$.each(data, function(i,item) {
mapped[item.label] = item.value;
labels.push(item.label);
});
process(labels);
});
}
,updater: function (item) {
$('#'+$this.attr('data-typeahead-target')).val(mapped[item]);
return item;
}
,items: 10
,minLength: 2
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2012-09-14 03:44:26
您在另一个函数中，因此您需要在外部闭包中保存对元素的引用，然后可以将其传递到内部闭包的事件处理程序中。您可以使用$.each()调用遍历选择器，每次都保存对元素(this)的引用--例如
$('#client-search, #endClient-search, #other-search').each(function() {
var $this = $(this);
$this.typeahead({
...
,updater: function (item) {
var target = $this.attr('id').split('-')[0] + '-id';
$('#'+target).val(mapped[item]);
return item;
}
...
});Stack Overflow用户
发布于 2013-07-03 18:20:04
公认的答案是一个很好的答案，但只是想分享一个实际上不需要外部闭包的替代方案。我使用的是bootstrap v2.3.1，您可以从this.$element获得输入。
例如：
$(':input[data-typeahead-url]').typeahead({
source: function (query, process) {
$.get(this.$element.attr('data-typeahead-url'), { query: query }, function (data) {
labels = [];
mapped = {};
$.each(data, function(i,item) {
mapped[item.label] = item.value;
labels.push(item.label);
});
process(labels);
});
}
,updater: function (item) {
$('#'+this.$element.attr('data-typeahead-target')).val(mapped[item]);
return item;
}
,items: 10
,minLength: 2
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12413594
复制相关文章
相似问题