Показать сообщение отдельно
  #1 (permalink)  
Старый 05.02.2014, 10:58
Аватар для Sveta
Профессор
Отправить личное сообщение для Sveta Посмотреть профиль Найти все сообщения от Sveta
 
Регистрация: 10.10.2012
Сообщений: 153

комбобокс для множественного выбора
Доброе утро) нужно сделать выпадающий список с автозаполнением, пытаюсь использовать комбобокс jquery, он работает: работает автозаполнение, можно выбрать любой пункт. Сложности именно с множественным выбором, выбрать из списка несколько значений я могу, но после выбора первого, на втором и третьем автозаполнение не работает!!! он почему-то продолжает искать автозаполнение по первому выбранному элементу...
function split(val){
		return val.split( /,\s*/ );
	}
	function extractLast(term){
		return split(term).pop();
	}	
	
		$.widget( "custom.combobox", {
			_create: function() {
				this.wrapper = $( "<span>" )
					.addClass( "custom-combobox" )
					.insertAfter( this.element );

				this.element.hide();
				this._createAutocomplete();
				this._createShowAllButton();
			},

			_createAutocomplete: function() {
				var selected = this.element.children( ":selected" ),
					value = selected.val() ? selected.text() : "";

				this.input = $( "<input>" )
					.appendTo( this.wrapper )
					.val( value )
					.attr( "title", "" )
					.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
					.autocomplete({
						delay: 0,
						minLength: 0,
						source: $.proxy( this, "_source" ),
						
						  // focus select нужны для множественного выбора
						  focus: function(){
							// отменяем вставку значения на получение фокуса
							return false;
						  },
						  select: function(event, ui){
							var terms = split(this.value);
							// удаляем вводимую часть текста и помещаем вместо нее выбранный элемент
							terms.pop();
							
							var  mas_selected_value= ui.item.value.split("'"); //разбиваем выбранный элемент чтобы выделить только id станции
		
							terms.push(mas_selected_value[1]);
														// собираем все элементы в строку, разделяя их запятыми и вставляем 
							// строку обратно в текстовое поле
							terms.push("");
							this.value = terms.join(", ");
							//формируем данные для запроса
							getStId(this.value.substring(0, this.value.length - 2));
							return false;
						  }
					})
					.tooltip({
						tooltipClass: "ui-state-highlight"
					});

				this._on( this.input, {
					autocompleteselect: function( event, ui ) {
						ui.item.option.selected = true;
						this._trigger( "select", event, {
							item: ui.item.option
						});
					},

					autocompletechange: "_removeIfInvalid"
				});
				
			},

			_createShowAllButton: function() {
				var input = this.input,
					wasOpen = false;

				$( "<a>" )
					.attr( "tabIndex", -1 )
					.attr( "title", "Показать весь список" )
					.tooltip()
					.appendTo( this.wrapper )
					.button({
						icons: {
							primary: "ui-icon-triangle-1-s"
						},
						text: false
					})
					.removeClass( "ui-corner-all" )
					.addClass( "custom-combobox-toggle ui-corner-right" )
					.mousedown(function() {
						wasOpen = input.autocomplete( "widget" ).is( ":visible" );
					})
					.click(function() {
						input.focus();

						// Close if already visible
						if ( wasOpen ) {
							return;
						}

						// Pass empty string as value to search for, displaying all results
						input.autocomplete( "search", "" );
					});
			},

			_source: function( request, response ) {
				var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
				response( 
					$.ui.autocomplete.filter(
					this.element.children( "option" ).map(function() {
					var text = $( this ).text();
					if ( this.value && ( !request.term || matcher.test(text) ) )
						return {
							label: text,
							value: text,
							option: this
						};
				})
					
					, extractLast(request.term))
			
				
				);
			},
						
			_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 + " в списке нет таких элементов" )
					.tooltip( "open" );
				this.element.val( "" );
				this._delay(function() {
					this.input.tooltip( "close" ).attr( "title", "" );
				}, 2500 );
				this.input.data( "ui-autocomplete" ).term = "";
			},

			_destroy: function() {
				this.wrapper.remove();
				this.element.show();
			}
		});
	

	
		$( "#stList" ).combobox();

Вот никак не могу заставить работать...ведь по идее за это отвечает функция extractLast(request.term) подскажите пожалуйста!
Ответить с цитированием