JQuery UI Autocomplete Combobox выделите

1

У меня есть <select> который мне нужно преобразовать в более функциональный combobox.

<span class="combo_box">
    <select id="state" name="state" tabindex="24">
        <option value="" disabled selected style="display:none"></option>
        <!-- Some JSP here -->
    </select>
</span>

И я преобразовал его в виджет (поэтому оригинальный <select> с id "state" все еще существует, но скрыт), как этот $("#state").combobox(); Мне нужно добавить ярлык ошибки к этому настраиваемому виджету при отправке формы, если combobox пуст. Для этого пользовательский интерфейс jQuery имеет пользовательский CSS-класс ui-state-error.

Скрипт проверки (отлично работает, когда я его отлаживаю)

function setComboboxClassBeforeSubmit(elementID) {
    var flag = true;
    var element = document.getElementById(elementID);
    var combobox = $(element).combobox();
    combobox.removeClass('ui-state-error');
    if (isEmpty(element)) {
        combobox.addClass('ui-state-error');
        flag = false;
    }
    return flag;
}

Но добавление этого класса CSS, похоже, не влияет на внешний вид виджета. Также попробовал $("#state").addClass('ui-state-error') как показано здесь, что-то вроде $("#state").addClass('ui-state-error') и до сих пор не повезло. Также попробовал это решение, отлично работает для selectmenu, но не для combobox.

Возможное решение: (спасибо нигде)

Редактирование _createAutocomplete: function() следующим образом:

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

        this.input = $( "<input>" )
            .appendTo( this.wrapper )
            .val( value )
            .attr( "title", "" )
            .attr( "id", "ui-" + this.element.attr("id") + "-input" )
...

Проблема: API по умолчанию не генерирует уникальный идентификатор для элементов со списком.

  • 0
    Вы уверены, что не применяете класс для скрытого выбора? :П
  • 0
    @nowhere В этом и заключается суть проблемы, в рабочем решении, о котором я упоминал, они использовали сгенерированные идентификаторы для элементов виджета. Но я не нашел идентификаторов для элементов комбинированного списка (автозаполнение и кнопка).
Показать ещё 8 комментариев
Теги:

1 ответ

1
Лучший ответ

Можете ли вы попробовать с кодом, который я здесь сделал? Я работал с использованием примера jqueryui: http://jsfiddle.net/b5e83x2q/

function checkValue(item){
    item.removeClass('ui-state-error');
    if(item.val()==""){
        item.addClass('ui-state-error');
    }
}

checkValue($(".custom-combobox input"));
.ui-state-error{
    background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="custom-combobox">
    <input title="" class="custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left ui-autocomplete-input" autocomplete="off" value="">
</span>

РЕДАКТИРОВАТЬ:

если вам нужно определить конкретный выбор, вы должны указать ему конкретный идентификатор: если вы использовали тот же код примера jqueryui, который у вас должен быть:

  _create: function() {
    this.wrapper = $( "<span>" )
      .addClass( "custom-combobox" )
      .insertAfter( this.element );

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

там вы можете попытаться добавить что-то вроде:

this.attr('id', 'specificId');

или отредактируйте оболочку span:

_create: function() {
    this.wrapper = $( "<span>" )
      .addClass( "custom-combobox" )
      .insertAfter( this.element )
      .attr('id', 'specificId');

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

После этого вы можете использовать:

checkValue($("#specificId input"));

для изменения только 1 выберите.

Поделиться
  • 0
    Проблема в том, что если у меня есть несколько вариантов выбора с этим классом, все они будут выделены. Так что мне нужно извлечь идентификатор конкретного ввода в поле со списком и кнопку конкретного поля со списком.
  • 0
    @Ahnassi Да, но если вы добавите к нему идентификатор с помощью кода, вы сможете получить доступ к нужному элементу. Вы пробовали мой код после части "изменить"?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню