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'> </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">×</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 передается нормальных ассоциативный массив. |
1 ты применяешь плагин $("#inputEventSid").combobox(); обращаясь к элементу по id, у тебя что 2 одинаковых id?)) Логично, что плагин применяется к первому.
2 У тебя там как видно jq dialog, явно же что он перекрывает твой список. Увеличивай ему z-index. Тут дело только в css, так что думай как решать такую проблему. 3 не знаю какая кнопочка в коде не вижу, кастомная или плагин должен ее создавать? |
Разобрался с несколькими инпутами.
По поводу z-index, спасибо, сделал. А насчет кнопки, справа от инпута должна быть кнопочка вот такая Ссылка По идее ее должен создавать плагин. И еще не могу никак сделать выбранный элемент по умолчанию. в инпуте тупо выбирается самый первый, а нужно тот который выбран в селекторе. |
Насчет кнопки незнаю смотри api плагина, может там параметр надо добавить какой то, либо опять же может из за css не отображается.
Нужному оптиону надо поставить аттрибут selected |
Часовой пояс GMT +3, время: 12:09. |