gpt4 book ai didi

javascript - JQuery UI 自动完成组合框突出显示

转载 作者:行者123 更新时间:2023-11-28 16:48:26 25 4
gpt4 key购买 nike

我有一个 <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>

然后我将它转换为小部件(所以原始的 <select> id 为“state”仍然存在但隐藏了)像这样 $("#state").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 类似乎对小部件的外观没有影响。还尝试了硬编码,就像显示的那样 here ,类似于 $("#state").addClass('ui-state-error')仍然没有运气。也试过this solution , 适用于选择菜单但不适用于组合框。

可能的解决方案:(感谢 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 不会为组合框的元素生成唯一 ID。

最佳答案

你能试试我在这里做的代码吗?我是用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 个选择。

关于javascript - JQuery UI 自动完成组合框突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32887803/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com