jQuery：如何在autocomplete的AJAX回调中引用触发函数的根元素？

你可以通过两种简单方式解决这个问题：

方法1：直接使用request.term（推荐） #

jQuery UI Autocomplete的source回调函数自带request参数，其中的term属性就是当前触发自动补全的输入框内容，直接调用即可：

var search = request.term.toLowerCase();

方法2：通过闭包保存当前输入框引用 #

在source函数开头先存储当前输入框的DOM元素——此时this指向的就是触发自动补全的.main-item输入框，后续AJAX的success回调可以通过闭包访问这个变量：

source: function( request, response ) {
    var $currentInput = $(this); // 保存当前输入框引用
    $.ajax({
        url: "https://api.test.com",
        type: "GET",
        dataType: "xml",
        success: function (data) {
            var matches = [];
            var search = $currentInput.val().toLowerCase(); // 使用保存的引用取值
            // 后续逻辑不变
        },
        error: function (req, err) {
            console.log(req)
        }
    });
}

另外提醒你：当前select回调里的代码会把所有.main-item输入框都设为选中值，应该改成只给当前触发选择的输入框赋值：

select: function( event, ui ) {
    $(this).val(ui.item.value); // this指向当前触发选择的输入框
    $( "span.input-group-btn > input" ).click();
}

修正后的完整代码：

$(function () {
    $( ".main-item" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "https://api.test.com",
                type: "GET",
                dataType: "xml",
                success: function (data) {
                    var matches = [];
                    var search = request.term.toLowerCase();

                    $(data).find("string").each(function () {
                        var item = $(this).text();
           
                        if (item.toLowerCase().indexOf(search) > -1) {
                            matches.push(item);
                        }
                    });

                    response(matches);
                },
                error: function (req, err) {
                    console.log(req)
                }
            });

        },
        minLength: 2,
        select: function( event, ui ) {
            $(this).val(ui.item.value);
            $( "span.input-group-btn > input" ).click();
        }
    });
});

内容的提问来源于stack exchange，提问作者Seb