jquery - 无法让 $(this) 在 jQueryUI 自动完成中工作

Question

我正在尝试使用 jQueryUI 创建一个通用的自动完成脚本。自动完成应该适用于每个:

<input type='text' class='autocomplete' id='foo'/>
<input type='text' class='autocomplete' id='bar'/>
...

现在我尝试使用 $(this) 访问源函数中的“foo”或“bar”，但在发出警报时我总是得到“未定义”。

$('input.autocomplete').autocomplete({
    source: function(req, add){
        var id = $(this).attr('id');
        alert(id);
    }
});

我做错了什么？

Answer 1

为您选择的每个项目单独设置自动完成，使用闭包保存对相关元素的引用。类似于以下内容:

$('input.autocomplete').each(function(i, el) {
    el = $(el);
    el.autocomplete({
        source: function(req, add) {
            var id = el.attr('id');
            alert(id);
        }
    });
});

<小时/>

替代方案(编辑)

我不明白为什么对使用 each() 有如此大的阻力:它有效，代码非常清晰易读，并且不会带来效率问题；但如果您决定避免使用 each()，这里有一个替代方案...

*请注意:以下方法(有点)依赖于 jQuery Autocomplete 的内部结构，因此我推荐第一个选项...但选择权在于您。

$('input.autocomplete').autocomplete({
        source: function(req, add) {
            var id = this.element.attr('id');
            alert(id);
        }
    });
});

这将起作用，至少直到/除非他们改变从 autocomplete 插件中调用 source() 函数的方式。

所以，您有两个选择......适合每个人。