JQuery UI Autocomplete Combobox highlight

Question

I have a <select> which I need to transform in more functional 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>

And I transformed it in to widget (so original <select> with id "state" is still there but hidden) like this $("#state").combobox(); What i need is to add an error highlight to this custom widget on form submission if combobox is empty. jQuery UI has a custom CSS class ui-state-error for this.

Validation script (works fine as I debug it)

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;
}

But adding this CSS class seems like have no effect on widget look. Also tried hardcode like it was shown here , something like $("#state").addClass('ui-state-error') and still no luck. Also tried this solution , works fine for selectmenu but not for combobox.

Possible solution: (thanks to nowhere )

Editing _createAutocomplete: function() like this:

_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" )
...

Issue is - default API doesn't generate unique ID's for combobox's elements.

Answer 1

Can you try with the code I've made here? I operated by using the jqueryui example: 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:

if you need to identify a specific select you should give it a specific id: if you used the same code of the jqueryui example you should have:

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

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

there you might try to add something like:

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

or edit the span wrapper:

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

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

After that you can use:

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

to change only 1 select.