Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.07.2014, 12:01
Новичок на форуме
Отправить личное сообщение для mastanggt Посмотреть профиль Найти все сообщения от mastanggt
 
Регистрация: 24.07.2014
Сообщений: 8

jquery ui autocomplete combobox в модальном окне bootstrap
Добрый день.
Имеется вот такая таблица - ссылка
При нажатии на кнопку "Изменить' открывается форма - Ссылка
смысл в том, чтобы в полях event_sid и signal_sid был autocomplete combobox.
Во первых скрипт применяется только к 1 инпуту, во вторых при попытке ввода данных, список доступных команд вылазит ПОД модальным окном - Ссылка
И в третьих, не создается кнопочка возле инпута для отображения всех вариантов команд.

Вот код js скрипта
(function ($) {
		$.widget("ui.combobox", {
			_create: function () {
				var self = this,
					select = this.element.hide(),
					selected = select.children(":selected"),
					value = selected.val() ? selected.text() : "";
				var input = this.input = $("<input>")
					.insertAfter(select)
					.val(value)
					.autocomplete({
						delay: 0,
						minLength: 0,
						source: function (request, response) {
							var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
							response(select.children("option").map(function () {
								var text = $(this).text();
								if (this.value && ( !request.term || matcher.test(text) ))
									return {
										label: text.replace(
											new RegExp(
												"(?![^&;]+;)(?!<[^<>]*)(" +
													$.ui.autocomplete.escapeRegex(request.term) +
													")(?![^<>]*>)(?![^&;]+;)", "gi"
											), "$1"),
										value: text,
										option: this
									};
							}));
						},
						select: function (event, ui) {
							ui.item.option.selected = true;
							self._trigger("selected", event, {
								item: ui.item.option
							});
						},
						change: function (event, ui) {
							if (!ui.item) {
								var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
									valid = false;
								select.children("option").each(function () {
									if ($(this).text().match(matcher)) {
										this.selected = valid = true;
										return false;
									}
								});
								if (!valid) {
									// remove invalid value, as it didn't match anything
									$(this).val("");
									select.val("");
									input.data("autocomplete").term = "";
									return false;
								}
							}
						}
					})
					.addClass("ui-widget ui-widget-content ui-corner-left form-control");

				input.data("autocomplete")._renderItem = function (ul, item) {
					return $("<li></li>")
						.data("item.autocomplete", item)
						.append("<a>" + item.label + "</a>")
						.appendTo(ul);

				};

				this.button = $("<button type='button'>&nbsp;</button>")
					.attr("tabIndex", -1)
					.attr("title", "Show All Items")
					.insertAfter(input)
					.button({
						icons: {
							primary: "ui-icon-triangle-1-s"
						},
						text: false
					})
					.removeClass("ui-corner-all")
					.addClass("ui-corner-right ui-button-icon")
					.click(function () {
						// close if already visible
						if (input.autocomplete("widget").is(":visible")) {
							input.autocomplete("close");
							return;
						}

						// work around a bug (likely same cause as #5265)
						$(this).blur();

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

			destroy: function () {
				this.input.remove();
				this.button.remove();
				this.element.show();
				$.Widget.prototype.destroy.call(this);
			}
		});
	})(jQuery);
	$(function () {
		$("#inputEventSid").combobox();
	});

Вот код самого модального окна
<div class="modal fade" id="changeDataModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">Введите новые данные</h4>
			</div>

			<div class="modal-body">

				<div class="form-group row">
					<?= Form::label('inputName', 'Имя', array('class' => 'col-sm-3 control-label')) ?>
					<div class="col-sm-9">
						<?=
						Form::input('text', 'name', '', array(
							'placeholder' => 'Название',
							'class'       => 'form-control',
							'id'          => 'inputName',
							'required'    => 'required',
						));
						?>
					</div>
					<div id="errorName" class="text-danger text-center"></div>
				</div>

				<div class="form-group row">
					<?= Form::label('inputEventSid', 'event_sid', array('class' => 'col-sm-3 control-label')) ?>
					<div class="col-sm-9">

						<div class="demo">
							<div class="ui-widget">
								<?=
								Form::select('EventSid', Event::getEventSid(), '', array(
									'class'    => 'form-control',
									'id'       => 'inputEventSid',
									'required' => 'required',
								));
								?>
							</div>
						</div>
					</div>
					<div id="errorEventSid" class="text-danger text-center"></div>
				</div>

				<div class="form-group row">
					<?= Form::label('inputRule', 'Условие', array('class' => 'col-sm-3 control-label')) ?>
					<div class="col-sm-9">
						<?=
						Form::input('text', 'rule', '', array(
							'placeholder' => 'rule',
							'class'       => 'form-control',
							'id'          => 'inputRule',
						));
						?>
					</div>
					<div id="errorRule" class="text-danger text-center"></div>
				</div>


				<div class="form-group row">

					<?= Form::label('inputSignalSid', 'signal_sid', array('class' => 'col-sm-3 control-label')) ?>
					<div class="col-sm-9">
						<div class="demo">
							<div class="ui-widget">
						<?=
						Form::select('SignalSid', Signal::getSignalSid(), '', array(
							'class'    => 'form-control',
							'id'       => 'inputSignalSid',
							'required' => 'required',
						));
						?>
					</div>
					</div>
					</div>
					<div id="errorSignalSid" class="text-danger text-center"></div>
				</div>


			</div>

			<div class="modal-footer">
				<?=
				Form::button('Сохранить', array(
					'id'    => 'actionBtn',
					'class' => 'btn btn-success changeDataModal',
				)); ?>
				<button type="button" class="btn btn-danger" data-dismiss="modal">Отмена</button>
			</div>
		</div>
	</div>
</div>

Проект делается в фреймворке laravel, поэтому формы назначаю таким способом.
В форме inputEventSid передается нормальных ассоциативный массив.
Ответить с цитированием
  #2 (permalink)  
Старый 24.07.2014, 13:42
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

1 ты применяешь плагин $("#inputEventSid").combobox(); обращаясь к элементу по id, у тебя что 2 одинаковых id?)) Логично, что плагин применяется к первому.

2 У тебя там как видно jq dialog, явно же что он перекрывает твой список. Увеличивай ему z-index. Тут дело только в css, так что думай как решать такую проблему.

3 не знаю какая кнопочка в коде не вижу, кастомная или плагин должен ее создавать?
Ответить с цитированием
  #3 (permalink)  
Старый 24.07.2014, 14:43
Новичок на форуме
Отправить личное сообщение для mastanggt Посмотреть профиль Найти все сообщения от mastanggt
 
Регистрация: 24.07.2014
Сообщений: 8

Разобрался с несколькими инпутами.
По поводу z-index, спасибо, сделал.
А насчет кнопки, справа от инпута должна быть кнопочка вот такая
Ссылка
По идее ее должен создавать плагин.
И еще не могу никак сделать выбранный элемент по умолчанию.
в инпуте тупо выбирается самый первый, а нужно тот который выбран в селекторе.

Последний раз редактировалось mastanggt, 24.07.2014 в 16:02.
Ответить с цитированием
  #4 (permalink)  
Старый 25.07.2014, 09:45
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Насчет кнопки незнаю смотри api плагина, может там параметр надо добавить какой то, либо опять же может из за css не отображается.

Нужному оптиону надо поставить аттрибут selected
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery маска в модальном окне ajax psfdek Элементы интерфейса 7 25.06.2014 16:51
autocomplete в модальном окне lukingnu jQuery 5 29.10.2012 16:35
jquery wysiwyg в модальном окне jquery ui foreach jQuery 1 19.08.2012 22:07
нежелательная отправка формы в jQuery UI autocomplete combobox konst56 jQuery 0 18.12.2010 11:28
Авторизация в модальном окне с помощью jQuery A.N.R.I jQuery 17 01.03.2010 19:26