JQuery AutoComplete如何手动触发select回调并传入自定义数据

方案1：直接调用Autocomplete实例的select方法 #

不需要模拟UI点击，直接访问组件实例触发回调，代码如下：

// 构造符合要求的自定义data，结构和原生返回的ui参数一致
const customData = {
    item: {
        label: "自定义显示名称",
        value: "自定义值",
        // 可添加任意你需要的自定义字段
        contact_id: 1001,
        phone: "13xxxxxxxxx"
    }
};

// 获取Autocomplete实例
const autocompleteInstance = $("#id_full_name").autocomplete("instance");
// 手动触发select回调，第一个参数可传入自定义事件对象，第二个为自定义参数
autocompleteInstance.select($.Event("autocompleteselect"), customData);

方案2：抽离业务逻辑独立调用（更灵活） #

将select内的业务逻辑抽为公共函数，原生触发和手动调用都可直接使用：

// 抽离select回调业务逻辑
function handleAutocompleteSelect(event, data) {
    if (true) {
        /* 执行业务逻辑 */
    } else {
        /* 执行业务逻辑 */
    }
}

// 初始化Autocomplete时绑定抽离的函数
$("#id_full_name").autocomplete({
    source: "/messages/fax/contact_autocomplete/",
    minLength: 1,
    focus: function(event, ui) {
        event.preventDefault();
    },
    select: handleAutocompleteSelect
});

// 手动触发时直接调用函数即可
const myCustomData = {
    item: {
        value: "custom_value",
        label: "自定义联系人"
    }
};
handleAutocompleteSelect(null, myCustomData);

注意：使用方案1时如果不需要将自定义参数的value自动填充到输入框，可在select回调开头添加event.preventDefault()阻止默认行为。

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