JQuery UI Autocomplete Combobox highlight

Question

У меня есть <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> с идентификатором «состояние» все еще там, но скрытый) как этот $("#state").combobox(); Что мне нужно, чтобы добавить изюминку ошибки в этом пользовательском виджет на форме представления, если выпадающие пусто. Для этого пользовательский интерфейс jQuery имеет собственный CSS-класс ui-state-error.

Validation скрипт (работает отлично, как я его отладки)

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 кажется, не имеют никакого влияния на виджете внешний вид. Также попробовал hardcode, как было показано here, что-то вроде $("#state").addClass('ui-state-error') и до сих пор не повезло. Также попробовал this solution, отлично работает для selectmenu, но не для combobox.

Возможное решение: (благодаря nowhere)

Редактирование _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 не создает уникальные идентификаторы для элементов управления ComboBox в.

Answer 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>

EDIT:

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

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

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

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

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

или отредактировать калибровочный обертку:

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

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

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

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

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