如何让 $(this) 在 JQueryUI 自动完成中工作

Question

这是一个fiddle 示例

我无法让$(this) 使用 jQueryUI 自动完成功能在源函数中工作。 控制台显示搜索输入在发送 Ajax 请求之前无法获取其数据属性“名称”。有没有办法将变量“name”传递给data？

$('.input').autocomplete({
    source: function (request, response) {
        var name = $(this).data('name');
        console.log(name);
        $.ajax({
            url: url,
            dataType: "json",
            data: {
                'q': request.term,
                'field': name
            },
            success: function (data) {
                response($.map(data.query.results.json.json, function (item) {
                    return {
                        label: item.name,
                    }
                }));
            }
        });
    },
    minLength: 2,
    select: function (event, ui) {
        $(this).val(ui.item.label);
        $(this).val(ui.item.label);
    },
    open: function () {
        $(this).autocomplete("widget").width(400)
    }
});

Answer 1

您应该使用this.element 来访问相应的输入元素。 this 指向自动完成实例本身：

var name = $(this.element).data('name');