无法获得$(this)在jQueryUI自动完成工作

Question

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

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

现在我正在尝试使用$(this)访问源函数中的'foo'或'bar',但是在发出警报时我总是得到'undefined'.

$('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自动完成的内部,所以我建议第一个选项...但是选择是你的.

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

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

所以,你有两个选择......适合每个人.