在jQueryUI自动完成中不能获得$(这个)

I'm trying to create a generic autocomplete script using jQueryUI. The autocomplete should work for every:

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

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

Now I'm trying to access 'foo' or 'bar' in the source function using $(this), but when alerting I always get 'undefined'.

现在我正在尝试使用$(this)访问源函数中的“foo”或“bar”，但当警告时，我总是得到“undefined”。

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

What am I doing wrong?

我做错了什么?

4 个解决方案

#1

Setup autocomplete separately for each item in your selection, using a closure to hold a reference to the relevant element. Something like the following:

使用闭包保存对相关元素的引用，分别为选择中的每个项设置autocomplete。像下面这样:

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

Alternative (edit)

替代(编辑)

I don't see why there is such resistance to using each(): it works, the code is very clear and readable, and it introduces no issues with efficiency; but if you're determined to avoid each(), here's an alternative...

我不明白为什么使用each()会有如此大的阻力:它可以工作，代码非常清晰和可读，并且它不会带来效率问题;但是如果您决定避免使用each()，这里有一个替代方法……

*PLEASE NOTE: the following approach relies (a little bit) on the internals of jQuery Autocomplete, so I'd recommend the first option... but the choice is yours.

*请注意:以下方法(稍微)依赖于jQuery自动完成的内部特性，所以我推荐第一个选项……但选择权在你。

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

That will work, at least until/unless they change the way the source() function is called from within the autocomplete plugin.

至少在/除非它们改变了从autocomplete插件中调用source()函数的方式之前，这是可行的。

So, you have two options... something for everyone.

所以，你有两个选择…每一个人。

#2

To access that input element you should be able to do the following:

要访问该输入元素，您应该能够执行以下操作:

$(this.element).val();

Of course, that just gets the value. You can access the other attributes like so:

当然，它会得到值。您可以访问其他属性如下:

$(this.element).attr('value'); // just another way to get the value
$(this.element).attr('id');

Also, suppose you want to access that element in the select event, you can do that like so:

另外，假设您希望访问select事件中的元素，您可以这样做:

$(event.target).attr('value');
$(event.target).attr('id');

#3

$(this) will come from your newly created function and thus not work. Move your id declaration above source and it should work.

$(this)将来自新创建的函数，因此不能工作。将您的id声明移动到源代码之上，它应该可以工作。

#4

Marwelin is correct. 'this' will reference the newly created function you are nested within. This is easily fixable by creating the var id outside the function and using it within the function.

Marwelin是正确的。“this”将引用您嵌套的新创建的函数。通过在函数外部创建var id并在函数内部使用它，这是很容易修复的。

#1