我正在使用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
});
我在同一个页面上有很多输入搜索框,每个搜索框都有一个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 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
});
});