jQuery UI自动完成组合框突出显示

Question

我有一个<select> ，我需要在更多功能的组合框中进行转换。

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

然后我将其转换为小部件（因此ID为“ state”的原始<select>仍然存在，但隐藏了），就像这样的$("#state").combobox(); 我需要的是如果combobox为空，则在表单提交时向此自定义小部件添加错误突出显示。 jQuery UI为此有一个自定义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') ，但仍然没有运气。 也尝试过此解决方案 ，对于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不会为组合框的元素生成唯一的ID。

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> 

编辑：

如果需要标识一个特定的选择，则应给它一个特定的ID：如果使用了与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"));

仅更改1个选择。