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自动完成的内部，所以我建议使用第一个选项...但是选择是你的。

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

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

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

Answer 2

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

$(this.element).val();

当然，这只是获得了价值。您可以访问其他属性，如下所示：

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

另外，假设您想要访问select event中的该元素，您可以这样做：

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

Answer 3

$(this)将来自您新创建的功能，因此无效。将您的id声明移到source之上，它应该有效。

Answer 4

Marwelin是对的。 'this'将引用您嵌套在其中的新创建的函数。通过在函数外部创建var id并在函数中使用它，可以轻松解决这个问题。

Answer 5

从字面上这就是答案。不是 $（'this'）或 $（this）

示例：

$(".peoplepicker").autocomplete({
    source: function (request, response) {
        var url = "/data/myResource";

        var thisControl = this.element; // <<---

        $.ajax({
            url: url,
            type: "GET",
            headers: {
                Accept: "application/json;odata=nometadata"
            },
            async: true,
            cache: false,
            beforeSend: function () {
                thisControl.parent().parent().find(".srchstat").hide();    // <<===
                thisControl.parent().parent().find(".searching").fadeIn(); // <<===
            },
... [snipped]

使用thisControl = this.element;，您可以稍后在此控件范围内对目标控件进行操作。像这样：

thisControl.css("color","red");

或

thisControl.parent().parent().find(".searching").fadeIn();

我希望这会有所帮助。 fwiw：这就是我在生产应用程序中使用它的方式。

/* I am using: */
/*! jQuery v3.3.1 
/*! jQuery UI - v1.12.1 - 2020-02-03

无法获得$（this）在jQueryUI自动完成工作

5 个答案: