Javascript 从外部调用jQuery小部件

我编写了一个jquery小部件，其方法是

clear

：

(function($) {
    $.widget('ccf.mobileHeaderAutocomplete', {
        ...
        clear: function () {
            this.ulElement.empty();
        },
        ...
    });
})(jQuery);

我成功地对输入元素调用了另一个方法：

$('.header-searchfield input')
    .on('input', function () {
        var value = $(this).val();
        $(this).mobileHeaderAutocomplete('suggest', value);
    });

现在我想在单击按钮时调用它（在输入元素外部，小部件连接到该元素），但它不起作用：

$('.header-searchfield__close-button').on('click', function () {
    $('.header-searchfield input').data('mobileHeaderAutocomplete').clear();
}

JS控制台中的错误是

uncaughttypeerror:无法读取未定义的属性“clear”

---

我使用answer作为参考，并尝试了

ui mobileHeaderAutocomplete

。我在这里遗漏了什么吗？

这个.Element.empty（）可能？你不想调用

$（'.header searchfield input'）.mobileHeaderAutocomplete（“清除”）

？这个.Element.empty（）可能？你不想调用

$（'.header searchfield input'）.mobileHeaderAutocomplete（“清除”）

？