从外面调用jQuery小部件

Question

我用方法clear写了一个jquery-Widget：

(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控制台中的错误是Uncaught TypeError: Cannot read property 'clear' of undefined

我使用this回答作为参考，并尝试ui-mobileHeaderAutocomplete。我在这里错过了什么吗？