Question

我觉得这对大多数人来说都是一个快速而简单的方法，但至少对我而言，解决方案难以实现。

我正在扩展jQuery自动完成小部件，以包含一些默认的功能。我需要在select事件中引用this.options.primaryField。

$.widget( "mynamespace.myAutoComplete", $.ui.autocomplete, {
    options: {
        // our options
        selectedId:0,
        searchString:'',
        indexField:'',
        primaryField:'',
        secondaryField:'',

        // set existing ones
        autoFocus: true,
        minLength:3,

        select: function(event,ui) {
            // runs, but cant access this.options.<anything>
        }

    },

    _myselect: function (event,ui) {
        //does not run
        console.log("in myselect");
    },

    _renderItem: function (ul, item) {
        var icon='marker';
        return $("<li>")
            .append ('<div><a><i class=\"fi-' + icon + '"></i>' + item[this.options.primaryField] + "<br>" + item[this.options.secondaryField] + "</a><div>")
            .appendTo (ul);
    }
});

我在这里找到了潜在的解决方案： Howto access data held in widget options when inside a widget event handler， jQuery Widget Factory access options in a callback method和 jQuery-ui: How do I access options from inside private functions

但我不能让他们中的任何一个工作。这是我从这些解决方案中得到的代码:(自然地将它添加到$ .widget（... class）

_create: function() {

        // does not fire _myselect on select
        this._on(this.select, { change: "_myselect"});
        this._on(this.select, $.proxy(this._myselect, this));
        this._on(this.select, $.bind(this._myselect, this));

        this._super();
    },

我也尝试过将这些添加到_init函数中。我只想在单击一个Item时设置this.options.selectedId，searchString等。

提前致谢

Answer 1

最后钉了这个。对于遇到同样问题的其他人：

$.widget( "ui.autocomplete", $.ui.autocomplete, {
_init: function() {
    this.element.on("autocompleteselect", $.proxy(this.myselect, this));
},
options: {
    // our options
    selectedId:0,
    searchString:'',
    indexField:'',
    primaryField:'',
    secondaryField:'',
    ....
},
myselect: function (event, ui) {
    // event and ui work as normal
    // this, refers to the widget, so the options are available via
    // this.options.<blah>
}

我还应该指出，我在问题中选择的名称空间似乎也在问题中起了作用。如果我使用除ui.autocomplete以外的任何东西（我认为这将使未经修改的自动完成无法访问，无论我有这个代码），事件都无法触发。也就是说，即使命名空间为ui.autocomplete，我在问题中提到的三个this._on ..命令仍然失败

扩展的jquery小部件自动完成中的代理

1 个答案: