Magento 2 extend $.mage.quickSearch Widget

Question

I don't seem to be able to extend quick search module widget form-mini.js found in module/path: ../vendor/magento/module-search/view/frontend/web/form-mini.js

How can I extend in my custom module $.mage.quickSearch Widget?

Already tried in Vendor_Module/js/search:

define([
    'jquery',
    'underscore',
    'mage/template',
    'matchMedia',
    'jquery/ui',
    'mage/translate',
    'mage/menu'
], function($){

    $.widget('custom.quickSearch', $.mage.quickSearch', {
        _init: function () {
            alert("I'm here");
        }
    });

    return $.custom.quickSearch;
});

in requirejs-config.js

var config = {
    "map": {
        "*": {
            "quickSearch": "Vendo_Module/js/search"
        }
    }
};

I've previously successfully extended $.mage.menu Widget using the same technic as above but struggling with quick search does anyone know? help appreciated!

Answer 1

The best practice is to use mixins way with the full path of js.

app/code/Vendor/Module/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Search/form-mini': {
                'Vendor_Module/js/mixins/form-mini': true
            }

        }
    }
};

app/code/Vendor/Module/view/frontend/web/js/mixins/form-mini.js

define([
    'jquery',
    'underscore',
    'mage/template',
    'matchMedia',
    'jquery/ui',
    'mage/translate'
], function ($, _, mageTemplate, mediaCheck) {

    return function (widget) {
        $.widget('custom.quickSearch', widget, {
            _init: function () {
                alert("I'm here");
            }
        });
        return $.custom.quickSearch;
    };
});