Estou com dificuldade para identificar um problema que ocorre quando adiciono mais de uma tag <h:comboAutoComplete> na mesma página. O problema ocorre na chamada AJAX. Se houver mais de um campo <h:comboAutoComplete> o ajax de todos chamam a url do último <h:comboAutoComplete> adicionado na página.
Segue abaixo parte do html do jsp:
<tr>
<td>Setor:</td>
<td>
<h:comboAutoComplete id="setor" listaCombo="${listaSetores}" bean="apontamentoSaida.setor" action="/apontamentoSaida/autocomplete.setor" valueRecebe="${apontamentoSaida.setor.id}" valueSubmete="apontamentoSaida.setor.id" method="POST" formId="formSetor"/>
</td>
</tr>
<tr>
<td>Motorista:</td>
<td>
<h:comboAutoComplete id="motorista" listaCombo="${listaMotoristas}" bean="apontamentoSaida.motorista" action="/apontamentoSaida/autocomplete.motorista" valueRecebe="${apontamentoSaida.motorista.id}" valueSubmete="apontamentoSaida.motorista.id" method="POST" formId="formMotorista"/>
</td>
</tr>
<tr>
<td>Veículo:</td>
<td>
<h:comboAutoComplete id="veiculo" listaCombo="${listaVeiculos}" bean="apontamentoSaida.veiculo" action="/apontamentoSaida/autocomplete.veiculo" valueRecebe="${apontamentoSaida.veiculo.id}" valueSubmete="apontamentoSaida.veiculo.id" method="POST" formId="formVeiculo"/>
</td>
</tr> Segue abaixo o código da tag:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ tag language="java" body-content="empty" pageEncoding="ISO-8859-1" dynamic-attributes="attrs"%>
<%@ attribute name="action" description="action do form" required="true" type="java.lang.String"%>
<%@ attribute name="method" description="método do formulário" required="true" type="java.lang.String"%>
<%@ attribute name="formId" description="id do form" required="false" type="java.lang.String"%>
<%@ attribute name="id" description="id do componente" required="false" type="java.lang.String"%>
<%@ attribute name="bean" description="tipo de bean: cliente, viagem..." required="true" type="java.lang.String"%>
<%@ attribute name="valueRecebe" description="nome do campo que receberá valor do controller" required="true" type="java.lang.String"%>
<%@ attribute name="valueSubmete" description="nome do campo que enviará o valor para o controller" required="true" type="java.lang.String"%>
<%@ attribute name="campoCodigo" description="nome do campo do código que também deve ser exibido" required="false" type="java.lang.String"%>
<%@ attribute name="listaCombo" description="lista de valores a receber do controller" required="true" type="java.util.List"%>
<c:set var="idForm" value=""/>
<c:if test="${not empty formId}">
<c:set var="idForm">id="${formId}"</c:set>
</c:if>
<c:if test="${empty id}">
<c:set var="id">idCampo</c:set>
</c:if>
<c:if test="${empty campoCodigo}">
<c:set var="campoCodigo">i</c:set>
</c:if>
<form ${idForm} action="<c:url value="${action}"/>" method="POST" accept-charset=utf-8>
<input id="${id}" type="hidden" name="${bean}.id" value="${bean}.id"/>
<div>
<select name="${valueSubmete}" id="combobox${id}" class="cbx">
<option value="">Selecione</option>
<c:forEach var="item" items="${listaCombo}">
<c:choose>
<c:when test="${item.id == valueRecebe}">
<option value="${item.id}" selected="selected"> ${item.nome}</option>
</c:when>
<c:otherwise>
<option value="${item.id}">${item.nome}</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
</div>
<script type="text/javascript" id="${id}Script">
(function( $ ) {
var campoCod = '${campoCodigo}';
var idComponente = '${id}';
var resp = [];
$.widget( "ui.combobox", {
_create: function() {
var input,
self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "",
wrapper = this.wrapper = $( "<span>" )
.addClass( "ui-combobox" )
.insertAfter( select );
input = $( "<input>" )
.appendTo( wrapper )
.val( value )
.attr('id', 'input'+idComponente)
.addClass( "ui-state-default ui-combobox-input" )
.autocomplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
$.ajax({
url: "<c:url value='${action}'/>",
dataType: "json",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
resp = [];
response( $.map( data.list, function( item ) {
resp.push(item.nome + (campoCod.length>1 ? ", " + item.${campoCodigo} : ""));
return {
label: item.nome + (campoCod.length>1 ? ", " + item.${campoCodigo} : ""),
value: item.nome + (campoCod.length>1 ? ", " + item.${campoCodigo} : ""),
id: item.id
}
}));
}
});
},
select: function( event, ui ) {
ui.item.selected = true;
self._trigger( "selected", event, {
item: ui.item.id
});
$('#'+idComponente).val(ui.item.id);
},
change:function( event, ui ) {
if ( !ui.item ) {
valid = false;
$.each(resp,function(index, item) {
if (item == $(this).val()) {
this.selected = valid = true;
return false;
}
});
if ( !valid ) {
$('#'+idComponente).val( null );
}
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
input.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Mostrar todos os itens" )
.appendTo( wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-combobox-toggle" )
.click(function() {
// close if already visible
if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
input.autocomplete( "close" );
return;
}
// work around a bug (likely same cause as #5265)
$( this ).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
input.focus();
});
},
destroy: function() {
this.wrapper.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
})( jQuery );
$(function() {
$( ".cbx").combobox();
});
</script>
</form>No seguinte post segue o código html gerado.