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.

Are you sure you're not applying the class to the hidden select? :P — nowhere
– nowhere, Commented Oct 1, 2015 at 13:01
@nowhere that is the core of the problem, in the working solution I mentioned they used some generated id's for widget elements. But i didn't found id's for combobox elements (autocomplete and button). — Ahnassi
– Ahnassi, Commented Oct 1, 2015 at 13:07
Also: to my knowledge style="display:none" doesn't work in every browser when added to options. Have you tried it with older versions of IE? — nowhere
– nowhere, Commented Oct 1, 2015 at 13:09
This solution is for specific browser and for specific customer so no issue with that. — Ahnassi
– Ahnassi, Commented Oct 1, 2015 at 13:12
you need to identify the select created by the widget somehow... can't you rely on any class or id? Does it have a parent element you can use to identify it? — nowhere
– nowhere, Commented Oct 1, 2015 at 13:13

nowhere · Accepted Answer · 2015-10-01 13:37:47Z

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.

edited Oct 1, 2015 at 13:37

answered Oct 1, 2015 at 13:31

nowhere

1,5481 gold badge12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ahnassi Over a year ago

Problem is if I have multiple selects with this class all of them will be highlighted. So I need to extract id of specific combobox input and specific combobox button.

nowhere Over a year ago

@Ahnassi Yes but if you add an id to it via code you should be able to access the element you want. Have you tried my code after the "edit" part?

Ahnassi Over a year ago

Thank you! Editing _create: function() worked great though i don't think changing API is a very good solution but the best one i have for now.

nowhere Over a year ago

@Ahnassi Well we're just going around it's limits to make it better :P Glad to be of some help.

Collectives™ on Stack Overflow

JQuery UI Autocomplete Combobox highlight

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related