|
Фабрика виджетов и autocomplite
Здравствуйте.
Прикрутил себе autocomplite на основе комбобокса. https://jqueryui.com/autocomplete/#combobox там идёт переопределение комбобокса и вот тут: _removeIfInvalid: function( event, ui ) { // Selected an item, nothing to do if ( ui.item ) { return; } // Search for a match (case-insensitive) var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; this.element.children( "option" ).each(function() { if ( $( this ).text().toLowerCase() === valueLowerCase ) { this.selected = valid = true; return false; } }); // Found a match, nothing to do if ( valid ) { return; } // Remove invalid value this.input .val( "" ) .attr( "title", value + " didn't match any item" ) .tooltip( "open" ); this.element.val( "" ); this._delay(function() { this.input.tooltip( "close" ).attr( "title", "" ); }, 2500 ); this.input.autocomplete( "instance" ).term = ""; }, в случае неверного ввода (отсутствует в списке), поле ввода очищается и выводится сообщение. Хотел сделать вместо этого добавление нового элемента при помощи ajax.У меня это даже получилось, до того момента, пока на форме не появилось два комбобокса. Если переопределить в $.widjet(), то все комбобоксы будут вести себя одинаково. В случае с очисткой и выводом сообщения это хорошо. Но мне нужно выполнять разные ajax-запросы с различными параметрами для каждого комбобокса. Соответственно, мне необходимо переопределять эту функцию для каждого комбобокса, но как это сделать, ума не приложу. Натолкните на правильную мысль, пожалуйста. |
Misha_White,
в селекте в атрибуте data-url укажите ссылку. <select class="combobox" data-url="http" > this.url = this.element.data("url"); |
Misha_White, для каждого отдельно параметры в jquery-ui так передаются: $( "#combobox" ).combobox({ param1: 'value1', param2: 'value2' }), а внутри функций станет доступно так: this.options.param1, this.options.param2 и тд. Здесь можно почитать про устройство фабрики.
|
Да, с параметрами я уже сделал. Просто думал, что это похоже на костыли.
Теперь вопрос о том же, но в другом. На форме есть combobox, в котором, при отсутствии значения выполняется функция добавления значения. И есть другой комбобокс, в котором необходимо использовать механизм по-умолчанию. т.е. как в примере. Можно, конечно, опять параметр передавать, типа флаг и исходя из этого параметра выполнять определённые действия... Но я думал, что можно как-то при создании экземпляра ($('#selector').combobox()) переопределять функцию, которая отрабатывала бы ввод... код из примера: this._on( this.input, { autocompleteselect: function( event, ui ) { ui.item.option.selected = true; this._trigger( "select", event, { item: ui.item.option }); }, autocompletechange: "_removeIfInvalid" }); autocompletechange: как-то подменять, может... |
Пока сделал так:
$.widget( "custom.combobox", { options:{ func:"_removeIfInvalid", //действие по умолчанию url:"/failajaxlink", ....//ещё параметры для формирования AJAX запроса и диалоговых окон. }, ..... this._on( this.input, { autocompleteselect: function( event, ui ) { ui.item.option.selected = true; this._trigger( "select", event, { item: ui.item.option }); }, autocompletechange: this.options.func }); |
Misha_White, так параметр может быть и функцией:
_removeIfInvalid: function( event, ui ) { this.options.myFunc.call(this, event, ui); } |
:-?
Не догоняю... :( т.е. я в options myFunc пишу код функции по умолчанию? и в случае необходимости предаю другую функцию при создании? $.widget( "custom.combobox", { options:{ myFunc:function( event, ui ) { // Selected an item, nothing to do if ( ui.item ) { return; } // Search for a match (case-insensitive) var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; this.element.children( "option" ).each(function() { if ( $( this ).text().toLowerCase() === valueLowerCase ) { this.selected = valid = true; return false; } }); // Found a match, nothing to do if ( valid ) { return; } // Remove invalid value this.input .val("") .attr( "title", "\'"+value + "\' отсутсвует в справочнике. Для добавления обратитесь к Администратору" ) .tooltip( "open" ); this.element.val( "" ); this._delay(function() { this.input.tooltip( "close" ).attr( "title", "" ); }, 2500 ); this.input.autocomplete( "instance" ).term = ""; }, }, ..... this._on( this.input, { autocompleteselect: function( event, ui ) { ui.item.option.selected = true; this._trigger( "select", event, { item: ui.item.option }); }, autocompletechange: "_removeIfInvalid" }); .... _removeIfInvalid: function( event, ui ) { this.options.myFunc.call(this, event, ui); } и затем: $('#selector').combobox({myFunc:function( event, ui ) { // Selected an item, nothing to do if ( ui.item ) { return; } // Search for a match (case-insensitive) var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; this.element.children( "option" ).each(function() { if ( $( this ).text().toLowerCase() === valueLowerCase ) { this.selected = valid = true; return false; } }); // Found a match, nothing to do if ( valid ) { return; } // add invalid value .... }) |
Misha_White, ну повторяющийся код можешь оставить в _removeIfInvalid.
|
ага. Спасибо.
Вот как-то так я изначально и хотел сделать, только не знал как :) |
Misha_White,
если в функциях различаются только ajax-запросы с различными параметрами, то зачем две функции? |
Часовой пояс GMT +3, время: 05:03. |
|