Question

我正在使用Twitter Bootstrap 2.1.1和jQuery 1.8.1的Typeahead组件

我正在尝试从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
});

我在同一页面上有很多预先搜索框。每个搜索框都有一个标识#xxx-search和一个标识为#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
    });
});

Answer 1

你在另一个函数中，所以你需要保存对外部闭包中元素的引用，然后可以将它传递给内部闭包的事件处理程序。您可以使用$.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;
        }
        ...
     });

Answer 2

接受的答案很好，但只是想分享一个实际上不需要外部封闭的替代方案。我正在使用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
});

Twitter Bootstrap typeahead：使用`this`获取上下文/调用元素

2 个答案: