Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jquery ui autocomplete combobox в модальном окне bootstrap (https://javascript.ru/forum/jquery/48982-jquery-ui-autocomplete-combobox-v-modalnom-okne-bootstrap.html)

mastanggt 24.07.2014 12:01

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 передается нормальных ассоциативный массив.

krasovsky 24.07.2014 13:42

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

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

3 не знаю какая кнопочка в коде не вижу, кастомная или плагин должен ее создавать?

mastanggt 24.07.2014 14:43

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

krasovsky 25.07.2014 09:45

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

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


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