jQueryUI Autocomplete-Widget：我想将一个函数绑定到菜单小部件的select事件

问题描述

|| 我有以下使用jQueryUI自动完成小部件的脚本。每当在选择框中选择菜单项时，它就会调用某些功能：

<script type=\"text/javascript\">
    $(function() {
        $( \"#tags\" ).autocomplete({
            source: [ \"ActionScript\",\"AppleScript\",\"Asp\"],select: function() { 
                console.log(\"Element has been selected\");
            }
        });
    });
</script>

<div class=\"ui-widget\">
    <label for=\"tags\">Tags: </label>
    <input id=\"tags\">
</div>

这很好。但是我需要在多个自动完成窗口小部件实例中使用此方法，因此我更喜欢使用窗口小部件工厂扩展自动完成窗口小部件。 每当我想覆盖自动完成插件的方法时，此方法都很好：

$.widget(\"ui.myAutocomplete\",$.extend({},$.ui.autocomplete.prototype,{
    search: function( value,event ) {
        // this WORKS!
        console.log(\'overriding autocomplete.search\')

        return $.ui.autocomplete.prototype.search.apply(this,arguments);
    }
}));

但是，我不知道如何为基础菜单小部件执行此操作。 我试图覆盖

_init

方法并将函数绑定到

select

事件。但是，这不起作用，因为我不知道如何访问菜单小部件的

bind

方法（或者在运行时此时此菜单小部件尚不存在）

$.widget(\"ui.myAutocomplete\",{
    _init: function() {
        // this does NOT work. 
        this.bind(\'select\',function() { console.log(\'item has been selected\') })

        return $.ui.autocomplete.prototype._init.apply(this,arguments);
    }
}));

    

解决方法

我认为你很亲密；您应该覆盖

_create

而不是

_init

：

$.widget(\"ui.myAutocomplete\",$.extend({},$.ui.autocomplete.prototype,{
    _create: function() {
        // call autocomplete\'s default create method:
        $.ui.autocomplete.prototype._create.apply(this,arguments);

        // this.element is the element the widget was invoked with
        this.element.bind(\"autocompleteselect\",this._select);
    },_select: function(event,ui) {
        // Code to be executed upon every select.
    }
}));

用法：

$(\"input\").myAutocomplete({
    /* snip */
});

这是一个工作示例：http://jsfiddle.net/EWsS4/