jQueryUI Autocomplete-Widget: я хочу привязать функцию к событию select виджета меню - PullRequest
Новая
       3

jQueryUI Autocomplete-Widget: я хочу привязать функцию к событию select виджета меню

3 голосов
/ 24 мая 2011

У меня есть следующий скрипт, использующий виджет автозаполнения 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", $.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);
    }
}));

1 Ответ

3 голосов
/ 25 мая 2011

Я думаю, что вы близко; Вы должны переопределить _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/

...