Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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) подскажите пожалуйста!
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2014, 11:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Sveta,
Цитата:
после ввода трех букв в поле input-text
подсказывает любое последнее слово а не только первое
Ответить с цитированием
  #3 (permalink)  
Старый 05.02.2014, 11:58
Аватар для Sveta
Профессор
Отправить личное сообщение для Sveta Посмотреть профиль Найти все сообщения от Sveta
 
Регистрация: 10.10.2012
Сообщений: 153

я прошла по ссылке - но там эта проблема не решена - начиная со второго элемента варианты не показывает....и пробел у меня ставить не нужно - он сам добавляется.... А стандартный виджет Автозаполнение работает со множественным выбором, я пробовала - он предлагает варианты после каждого выбора....
Ответить с цитированием
  #4 (permalink)  
Старый 05.02.2014, 12:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Sveta
я прошла по ссылке - но там эта проблема не решена
а можно узнать какая именно проблема не решена?
Ответить с цитированием
  #5 (permalink)  
Старый 05.02.2014, 12:46
Аватар для Sveta
Профессор
Отправить личное сообщение для Sveta Посмотреть профиль Найти все сообщения от Sveta
 
Регистрация: 10.10.2012
Сообщений: 153

Не предлагает варианты автозаполнения после выбора первого варианта. У меня же список множественного выбора - нужно чтобы и на втором и третьем выборе предлагались варианты из списка.
Например список фруктов: я начинаю вводить "а" - выпадает список и предлагает мне апельсин и ананас, а выбираю апельсин, он вставляется в поле ввода, вставляется запятая и пробел, я ввожу снова букву "а" - а список уже не выпадает!! а нужно чтобы выпадал, обязательно....повторюсь, вроде бы функция extractLast(request.term) должна эту проблему решать...но почему-то не решает..может я ее используя как-то неверно....
Ответить с цитированием
  #6 (permalink)  
Старый 05.02.2014, 12:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Sveta
я начинаю вводить "а" - выпадает список и предлагает мне апельсин и ананас, а выбираю апельсин, он вставляется в поле ввода, вставляется запятая и пробел, я ввожу снова букву "а" - а список уже не выпадает!!
выпадает- вариант который я вам показал именно так и делает, разве что лезет с подсказками после третей буквы но всегда подскажет последнее введённое слово
Ответить с цитированием
  #7 (permalink)  
Старый 05.02.2014, 14:19
Аватар для Sveta
Профессор
Отправить личное сообщение для Sveta Посмотреть профиль Найти все сообщения от Sveta
 
Регистрация: 10.10.2012
Сообщений: 153

а я просто посмотрела там последнее сообщение - что у человека не предлагает варианты...но может он ошибся) я не могу понять там в вашем коде - что именно позволяет предлагать варианты после выбора первого элемента? там же как-то надо заставить автозаполнение "не видеть" уже выбранный элемент в текстовом поле...
Ответить с цитированием
  #8 (permalink)  
Старый 05.02.2014, 14:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Sveta
я не могу понять там в вашем коде - что именно позволяет предлагать варианты после выбора первого элемента?
проверяем последнее введённое
val = this.value.toLowerCase()
                .split(' ')
                .pop();

если ввели 3 символ
сравниваем это значение с началом слов из базы
data.forEach(function (i) {
            var reg = new RegExp('^'+val, 'i');
            if (reg.test(i)) {

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

логично))) Спасибо)) попробую в своем коде это как-то реализовать....весь вопрос в том как...у меня должна быть возможность просмотра всего имеющегося списка, это очень удобно реализовано в моем варианте...это в принципе от сюда взято:
http://jqueryui.com/resources/demos/.../combobox.html
Ответить с цитированием
  #10 (permalink)  
Старый 05.02.2014, 15:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Sveta,
может вы это искали http://jqueryui.com/autocomplete/#multiple
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Посоветуйте как улучшить код для работы с history api [ jquery + js + history api ] Geo Ваши сайты и скрипты 0 12.01.2014 00:41
Cookie для меню аккордион и для div Lastedl jQuery 1 03.12.2013 04:55
Удалению метаданных в JPEG lorents Библиотеки/Тулкиты/Фреймворки 2 22.04.2012 21:02
Обращения к списку множественного выбора MCTrane Общие вопросы Javascript 3 23.04.2010 17:32