如何重写jQuery UI Autocomplete的menufocus事件函数

问题原因 #

你扩展$.ui.autocomplete时，原生Autocomplete的_create方法已经通过_on绑定了menufocus事件，子类调用this._super()会执行父类的绑定逻辑，之后子类再绑定自己的menufocus事件，就会导致两个事件按绑定顺序触发（默认事件先执行）。

解决方案 #

在子类的_create方法中，先解绑父类绑定的menufocus事件，再绑定自定义逻辑。jQuery UI的事件会带上组件命名空间，父类的menufocus事件命名空间是.ui-autocomplete，可以精准解绑：

$.widget( "app.autocomplete", $.ui.autocomplete, {
    _renderItem: function( ul, item ) {
        // 自定义渲染逻辑保持不变
        var re = new RegExp( "(" + this.term + ")", "gi" ),
            cls = 'ui-autocomplete-term',
            template = "<span class='" + cls + "'>$1</span>",
            label = item.label.replace( re, template ),
            $li = $( "<li/>" ).appendTo( ul );
        
        $( "<a/>" ).attr( "href", "#" )
                   .html( label )
                   .appendTo( $li );

        // 修正选择器，原代码缺少ID前缀#，并改用length判断元素是否存在
        var hasRcSpan = $("#find-fund-search-btn-rc");
        if(hasRcSpan.length > 0){
            $('#' + uniqueId + '-search-icon').show();
        }else{
            $('#' + uniqueId + '-search-icon').hide();
        }

        return $li;
    },
    
    _create: function() {
        this._super();
        // 解绑原生Autocomplete绑定的menufocus事件
        this.menu.element.off("menufocus.ui-autocomplete");
        // 绑定自定义menufocus事件逻辑
        this._on( this.menu.element, {
            menufocus: function( event, ui ) {
                console.log("menu focus called");
                var label, item;
                item = ui.item.data( "ui-autocomplete-item" );
                // 播报内容到liveRegion
                label = ui.item.attr( "aria-label" ) || item.value;
                if ( label && String.prototype.trim.call( label ).length ) {
                    clearTimeout( this.liveRegionTimer );
                    this.liveRegionTimer = this._delay( function() {
                        this.liveRegion.html( $( "<div>" ).text( label ) );
                    }, 100 );
                }
            },
        });
    }
});

额外提示 #

1. 原代码中$("find-fund-search-btn-rc")缺少ID选择器的#，已修正为$("#find-fund-search-btn-rc")，并改用length > 0判断元素是否存在（比typeof/null判断更可靠）。
2. 确保uniqueId变量在当前作用域中已定义，否则会导致DOM操作报错。

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