Question

我使用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 factory扩展自动完成小部件。

每当我想要覆盖自动完成插件的方法时，这都很有效：

$.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", $.extend({}, $.ui.autocomplete.prototype, {
    _init: function() {
        // this does NOT work. 
        this.bind('select', function() { console.log('item has been selected') })

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

Answer 1

我觉得你很亲密;你应该覆盖_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/

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

1 个答案: