Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Фабрика виджетов и autocomplite (https://javascript.ru/forum/jquery/77985-fabrika-vidzhetov-i-autocomplite.html)

Misha_White 10.07.2019 06:31

Фабрика виджетов и 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-запросы с различными параметрами для каждого комбобокса.
Соответственно, мне необходимо переопределять эту функцию для каждого комбобокса, но как это сделать, ума не приложу. Натолкните на правильную мысль, пожалуйста.

рони 10.07.2019 08:08

Misha_White,
в селекте в атрибуте data-url укажите ссылку.
<select class="combobox" data-url="http" >

this.url = this.element.data("url");

Rise 10.07.2019 08:36

Misha_White, для каждого отдельно параметры в jquery-ui так передаются: $( "#combobox" ).combobox({ param1: 'value1', param2: 'value2' }), а внутри функций станет доступно так: this.options.param1, this.options.param2 и тд. Здесь можно почитать про устройство фабрики.

Misha_White 10.07.2019 08:56

Да, с параметрами я уже сделал. Просто думал, что это похоже на костыли.
Теперь вопрос о том же, но в другом.
На форме есть 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: как-то подменять, может...

Misha_White 10.07.2019 09:12

Пока сделал так:
$.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
        });

Rise 10.07.2019 09:15

Misha_White, так параметр может быть и функцией:
_removeIfInvalid: function( event, ui ) {
    this.options.myFunc.call(this, event, ui);
}

Misha_White 10.07.2019 09:34

:-?
Не догоняю... :(
т.е. я в 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
....
							          })

Rise 10.07.2019 09:43

Misha_White, ну повторяющийся код можешь оставить в _removeIfInvalid.

Misha_White 10.07.2019 09:48

ага. Спасибо.
Вот как-то так я изначально и хотел сделать, только не знал как :)

рони 10.07.2019 10:53

Misha_White,
если в функциях различаются только ajax-запросы с различными параметрами, то зачем две функции?


Часовой пояс GMT +3, время: 05:03.