[RESOLVIDO]VRaptor: jQuery combo + autocomplete

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:

		&lt;tr&gt;
			&lt;td&gt;Setor:&lt;/td&gt;
			&lt;td&gt; 
		     	&lt;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"/&gt;
		 &lt;/td&gt;
		&lt;/tr&gt;    
		&lt;tr&gt;
			&lt;td&gt;Motorista:&lt;/td&gt;
			&lt;td&gt; 
		     	&lt;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"/&gt;
		 &lt;/td&gt;
		&lt;/tr&gt;    
		&lt;tr&gt;
			&lt;td&gt;Veículo:&lt;/td&gt;
			&lt;td&gt; 
		     	&lt;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"/&gt;
		 &lt;/td&gt;
		&lt;/tr&gt; 

Segue abaixo o código da tag:

&lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt;
&lt;%@ tag language="java" body-content="empty" pageEncoding="ISO-8859-1" dynamic-attributes="attrs"%&gt;
&lt;%@ attribute name="action" description="action do form" required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="method" description="método do formulário" required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="formId" description="id do form" required="false" type="java.lang.String"%&gt;
&lt;%@ attribute name="id" description="id do componente" required="false" type="java.lang.String"%&gt;
&lt;%@ attribute name="bean" description="tipo de bean: cliente, viagem..." required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="valueRecebe" description="nome do campo que receberá valor do controller" required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="valueSubmete" description="nome do campo que enviará o valor para o controller" required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="campoCodigo" description="nome do campo do código que também deve ser exibido" required="false" type="java.lang.String"%&gt;
&lt;%@ attribute name="listaCombo" description="lista de valores a receber do controller" required="true" type="java.util.List"%&gt;

&lt;c:set var="idForm" value=""/&gt;
&lt;c:if test="${not empty formId}"&gt;
	&lt;c:set var="idForm"&gt;id="${formId}"&lt;/c:set&gt;
&lt;/c:if&gt;
&lt;c:if test="${empty id}"&gt;
	&lt;c:set var="id"&gt;idCampo&lt;/c:set&gt;
&lt;/c:if&gt;
&lt;c:if test="${empty campoCodigo}"&gt;
	&lt;c:set var="campoCodigo"&gt;i&lt;/c:set&gt;
&lt;/c:if&gt;


&lt;form ${idForm} action="&lt;c:url value="${action}"/&gt;&quot; method=&quot;POST&quot; accept-charset=utf-8&gt;
	
		&lt;input id="${id}" type="hidden" name="${bean}.id"  value="${bean}.id"/&gt;
		
	 &lt;div&gt;	
	        &lt;select name="${valueSubmete}" id="combobox${id}" class="cbx"&gt;
		        &lt;option value=""&gt;Selecione&lt;/option&gt;
			        &lt;c:forEach var="item" items="${listaCombo}"&gt;
						&lt;c:choose&gt;
						    &lt;c:when test="${item.id == valueRecebe}"&gt; 
			                  	&lt;option value="${item.id}" selected="selected"&gt; ${item.nome}&lt;/option&gt;  
					    	&lt;/c:when&gt;
					    	&lt;c:otherwise&gt;
								&lt;option value="${item.id}"&gt;${item.nome}&lt;/option&gt;    
					    	&lt;/c:otherwise&gt;
					    &lt;/c:choose&gt;	
			        &lt;/c:forEach&gt;
	        &lt;/select&gt;
	 &lt;/div&gt;    


	&lt;script type="text/javascript" id="${id}Script"&gt;
	(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 = $( "&lt;span&gt;" )
						.addClass( "ui-combobox" )
						.insertAfter( select );
	
				input = $( "&lt;input&gt;" )
					.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: "&lt;c:url value='${action}'/&gt;&quot;,
								dataType: &quot;json&quot;,
								data: {
									featureClass: &quot;P&quot;,
									style: &quot;full&quot;,
									maxRows: 12,
									name_startsWith: request.term
								},	
								success: function( data ) {
									resp = [];
									response( $.map( data.list, function( item ) {
										resp.push(item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.${campoCodigo} : &quot;&quot;));
										return {
											label: item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.${campoCodigo} : &quot;&quot;),
											value: item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.${campoCodigo} : &quot;&quot;),
											id: item.id  
										} 
									}));
								}
							});
						},
	
						select: function( event, ui ) {
							ui.item.selected = true;
							self._trigger( &quot;selected&quot;, 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( &quot;ui-widget ui-widget-content ui-corner-left&quot; );
	
				input.data( &quot;autocomplete&quot; )._renderItem = function( ul, item ) {
					return $( &quot;<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();
		});
	
	&lt;/script&gt;
&lt;/form&gt;

No seguinte post segue o código html gerado.

Acredito que, por você estar referenciando a chamada da função JS pela classe da combobox, esse executa o ultimo para todos os combobox que possuem aquela classe…

tenta substituir a seguinte linha:

$(function() {  
            $( "#combobox${id}").combobox();  // Faça pelo id.
        }); 

Isso deve resolver… Essa tag é sua? Se for, dá para melhorar bastante, hein…

Continuação do post acima.
Segue abaixo o código html gerado:

&lt;form id="formSetor" action="/CLog/apontamentoSaida/autocomplete.setor" method="POST" accept-charset=utf-8&gt;
	
		&lt;input id="setor" type="hidden" name="apontamentoSaida.setor.id"  value="apontamentoSaida.setor.id"/&gt;
		
	 &lt;div&gt;	
	        &lt;select name="apontamentoSaida.setor.id" id="comboboxsetor" class="cbx"&gt;
		        &lt;option value=""&gt;Selecione&lt;/option&gt;
			        
	        &lt;/select&gt;
	 &lt;/div&gt;    


	&lt;script type="text/javascript" id="setorScript"&gt;
	(function( $ ) {
		
		var campoCod = 'i';
		var idComponente = 'setor';
		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 = $( "&lt;span&gt;" )
						.addClass( "ui-combobox" )
						.insertAfter( select );
	
				input = $( "&lt;input&gt;&quot; )
					.appendTo( wrapper )
					.val( value )
					.attr('id', 'input'+idComponente)
					.addClass( &quot;ui-state-default ui-combobox-input&quot; )
					.autocomplete({
						delay: 0,
						minLength: 0,
						source: function( request, response ) {
							$.ajax({
								url: &quot;/CLog/apontamentoSaida/autocomplete.setor&quot;,
								dataType: &quot;json&quot;,
								data: {
									featureClass: &quot;P&quot;,
									style: &quot;full&quot;,
									maxRows: 12,
									name_startsWith: request.term
								},	
								success: function( data ) {
									resp = [];
									response( $.map( data.list, function( item ) {
										resp.push(item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;));
										return {
											label: item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;),
											value: item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;),
											id: item.id  
										} 
									}));
								}
							});
						},
	
						select: function( event, ui ) {
							ui.item.selected = true;
							self._trigger( &quot;selected&quot;, 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( &quot;ui-widget ui-widget-content ui-corner-left&quot; );
	
				input.data( &quot;autocomplete&quot; )._renderItem = function( ul, item ) {
					return $( &quot;<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();
		});
	
	&lt;/script&gt;
&lt;/form&gt;
		 &lt;/td&gt;
		&lt;/tr&gt;    
		&lt;tr&gt;
			&lt;td&gt;Motorista:&lt;/td&gt;
			&lt;td&gt; 


&lt;form id="formMotorista" action="/CLog/apontamentoSaida/autocomplete.motorista" method="POST" accept-charset=utf-8&gt;
	
		&lt;input id="motorista" type="hidden" name="apontamentoSaida.motorista.id"  value="apontamentoSaida.motorista.id"/&gt;
		
	 &lt;div&gt;	
	        &lt;select name="apontamentoSaida.motorista.id" id="comboboxmotorista" class="cbx"&gt;
		        &lt;option value=""&gt;Selecione&lt;/option&gt;
			        
	        &lt;/select&gt;
	 &lt;/div&gt;    


	&lt;script type="text/javascript" id="motoristaScript"&gt;
	(function( $ ) {
		
		var campoCod = 'i';
		var idComponente = 'motorista';
		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 = $( "&lt;span&gt;" )
						.addClass( "ui-combobox" )
						.insertAfter( select );
	
				input = $( "&lt;input&gt;&quot; )
					.appendTo( wrapper )
					.val( value )
					.attr('id', 'input'+idComponente)
					.addClass( &quot;ui-state-default ui-combobox-input&quot; )
					.autocomplete({
						delay: 0,
						minLength: 0,
						source: function( request, response ) {
							$.ajax({
								url: &quot;/CLog/apontamentoSaida/autocomplete.motorista&quot;,
								dataType: &quot;json&quot;,
								data: {
									featureClass: &quot;P&quot;,
									style: &quot;full&quot;,
									maxRows: 12,
									name_startsWith: request.term
								},	
								success: function( data ) {
									resp = [];
									response( $.map( data.list, function( item ) {
										resp.push(item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;));
										return {
											label: item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;),
											value: item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;),
											id: item.id  
										} 
									}));
								}
							});
						},
	
						select: function( event, ui ) {
							ui.item.selected = true;
							self._trigger( &quot;selected&quot;, 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( &quot;ui-widget ui-widget-content ui-corner-left&quot; );
	
				input.data( &quot;autocomplete&quot; )._renderItem = function( ul, item ) {
					return $( &quot;<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();
		});
	
	&lt;/script&gt;
&lt;/form&gt;
		 &lt;/td&gt;
		&lt;/tr&gt;    
		&lt;tr&gt;
			&lt;td&gt;Veículo:&lt;/td&gt;
			&lt;td&gt; 


&lt;form id="formVeiculo" action="/CLog/apontamentoSaida/autocomplete.veiculo" method="POST" accept-charset=utf-8&gt;
	
		&lt;input id="veiculo" type="hidden" name="apontamentoSaida.veiculo.id"  value="apontamentoSaida.veiculo.id"/&gt;
		
	 &lt;div&gt;	
	        &lt;select name="apontamentoSaida.veiculo.id" id="comboboxveiculo" class="cbx"&gt;
		        &lt;option value=""&gt;Selecione&lt;/option&gt;
			        
	        &lt;/select&gt;
	 &lt;/div&gt;    


	&lt;script type="text/javascript" id="veiculoScript"&gt;
	(function( $ ) {
		
		var campoCod = 'i';
		var idComponente = 'veiculo';
		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 = $( "&lt;span&gt;" )
						.addClass( "ui-combobox" )
						.insertAfter( select );
	
				input = $( "&lt;input&gt;&quot; )
					.appendTo( wrapper )
					.val( value )
					.attr('id', 'input'+idComponente)
					.addClass( &quot;ui-state-default ui-combobox-input&quot; )
					.autocomplete({
						delay: 0,
						minLength: 0,
						source: function( request, response ) {
							$.ajax({
								url: &quot;/CLog/apontamentoSaida/autocomplete.veiculo&quot;,
								dataType: &quot;json&quot;,
								data: {
									featureClass: &quot;P&quot;,
									style: &quot;full&quot;,
									maxRows: 12,
									name_startsWith: request.term
								},	
								success: function( data ) {
									resp = [];
									response( $.map( data.list, function( item ) {
										resp.push(item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;));
										return {
											label: item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;),
											value: item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;),
											id: item.id  
										} 
									}));
								}
							});
						},
	
						select: function( event, ui ) {
							ui.item.selected = true;
							self._trigger( &quot;selected&quot;, 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( &quot;ui-widget ui-widget-content ui-corner-left&quot; );
	
				input.data( &quot;autocomplete&quot; )._renderItem = function( ul, item ) {
					return $( &quot;<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();
		});
	
	&lt;/script&gt;
&lt;/form&gt;

As url do atributo action das tags são todos certos, porém a chamada AJAX sempre é:

http://localhost:8081/CLog/apontamentoSaida/autocomplete.veiculo?featureClass=P&style=full&maxRows=12&name_startsWith=

Rafael, já fiz isso e não resolveu. Segue o código html abaixo:

&lt;form id="formSetor" action="/CLog/apontamentoSaida/autocomplete.setor" method="POST" accept-charset=utf-8&gt;
	
		&lt;input id="setor" type="hidden" name="apontamentoSaida.setor.id"  value="apontamentoSaida.setor.id"/&gt;
		
	 &lt;div&gt;	
	        &lt;select name="apontamentoSaida.setor.id" id="comboboxsetor" class="cbx"&gt;
		        &lt;option value=""&gt;Selecione&lt;/option&gt;
			        
	        &lt;/select&gt;
	 &lt;/div&gt;    


	&lt;script type="text/javascript" id="setorScript"&gt;
	(function( $ ) {
		
		var campoCod = 'i';
		var idComponente = 'setor';
		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 = $( "&lt;span&gt;" )
						.addClass( "ui-combobox" )
						.insertAfter( select );
	
				input = $( "&lt;input&gt;&quot; )
					.appendTo( wrapper )
					.val( value )
					.attr('id', 'input'+idComponente)
					.addClass( &quot;ui-state-default ui-combobox-input&quot; )
					.autocomplete({
						delay: 0,
						minLength: 0,
						source: function( request, response ) {
							$.ajax({
								url: &quot;/CLog/apontamentoSaida/autocomplete.setor&quot;,
								dataType: &quot;json&quot;,
								data: {
									featureClass: &quot;P&quot;,
									style: &quot;full&quot;,
									maxRows: 12,
									name_startsWith: request.term
								},	
								success: function( data ) {
									resp = [];
									response( $.map( data.list, function( item ) {
										resp.push(item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;));
										return {
											label: item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;),
											value: item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;),
											id: item.id  
										} 
									}));
								}
							});
						},
	
						select: function( event, ui ) {
							ui.item.selected = true;
							self._trigger( &quot;selected&quot;, 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( &quot;ui-widget ui-widget-content ui-corner-left&quot; );
	
				input.data( &quot;autocomplete&quot; )._renderItem = function( ul, item ) {
					return $( &quot;<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() {
			$( "#comboboxsetor").combobox();
		});
	
	&lt;/script&gt;
&lt;/form&gt;
		 &lt;/td&gt;
		&lt;/tr&gt;    
		&lt;tr&gt;
			&lt;td&gt;Motorista:&lt;/td&gt;
			&lt;td&gt; 
		     	

&lt;style type="text/css"&gt;

    .autocomplete{ margin-left: 4px;position: relative;}

   	.Ui-autocomplete {
		height: 50px;
		overflow-y: auto;
		estouro-x: hidden;
		padding-direito: 20px;
	}
	.ui-autocomplete {cursor: default; }	
	.ui-menu  { 
		list-style:none;
		padding: 2px;
		margin: 0;
		display:block;
		float: left;
		position: absolute;
		z-index: 1; 
		overflow-y: auto;
		margin-top: 100px;
		height: 200px;
	}
	.ui-corner-all{
		border-radius: 0px 0px 0px 0px;
	}
	.ui-menu .ui-menu {
		margin-top: 100px;
			height: 50px;
	}
	.ui-menu .ui-menu-item {
		margin:0;
		padding: 0;
		zoom: 1;
		float: left;
		clear: left;
		width: 100%;
	
	}
	.ui-menu .ui-menu-item a {
		text-decoration:none;
		display:block;
		padding:.2em .4em;
		line-height:1.5;
		zoom:1;
	}
	.ui-menu .ui-menu-item a.ui-state-hover,
	.ui-menu .ui-menu-item a.ui-state-active {
		font-weight: normal;
		margin: -1px;
	}
	.ui-combobox {
		position: relative;
		display: inline-block;
	}
	
	.ui-combobox-toggle {
		position: absolute;
		top: 0;
		bottom: 0;
		margin-left: -1px;
		padding: 0;
		/* adjust styles for IE 6/7 */
		*height: 1.7em;
		*top: 0.1em;
	}

	.ui-state-default{
		background: url("") repeat-x scroll 50% 50%;
	    border: 1px solid #C5DBEC;
	    color: #2E6E9E;
	    font-weight: bold;
	    outline: medium none;
	}
	.ui-combobox-input {
		margin: 0;
		padding: 0.3em;
		width:auto;
		background: url("./img/search.gif") no-repeat;
		padding-left: 16px;
		width:250px;
	}
	.ui-corner-left {
		-moz-border-radius-topleft: 0px;
		-webkit-border-top-left-radius: 0px;
		-moz-border-radius-bottomleft: 0px;
		-webkit-border-bottom-left-radius: 0px;
	}
	
&lt;/style&gt;

&lt;form id="formMotorista" action="/CLog/apontamentoSaida/autocomplete.motorista" method="POST" accept-charset=utf-8&gt;
	
		&lt;input id="motorista" type="hidden" name="apontamentoSaida.motorista.id"  value="apontamentoSaida.motorista.id"/&gt;
		
	 &lt;div&gt;	
	        &lt;select name="apontamentoSaida.motorista.id" id="comboboxmotorista" class="cbx"&gt;
		        &lt;option value=""&gt;Selecione&lt;/option&gt;
			        
	        &lt;/select&gt;
	 &lt;/div&gt;    


	&lt;script type="text/javascript" id="motoristaScript"&gt;
	(function( $ ) {
		
		var campoCod = 'i';
		var idComponente = 'motorista';
		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 = $( "&lt;span&gt;" )
						.addClass( "ui-combobox" )
						.insertAfter( select );
	
				input = $( "&lt;input&gt;&quot; )
					.appendTo( wrapper )
					.val( value )
					.attr('id', 'input'+idComponente)
					.addClass( &quot;ui-state-default ui-combobox-input&quot; )
					.autocomplete({
						delay: 0,
						minLength: 0,
						source: function( request, response ) {
							$.ajax({
								url: &quot;/CLog/apontamentoSaida/autocomplete.motorista&quot;,
								dataType: &quot;json&quot;,
								data: {
									featureClass: &quot;P&quot;,
									style: &quot;full&quot;,
									maxRows: 12,
									name_startsWith: request.term
								},	
								success: function( data ) {
									resp = [];
									response( $.map( data.list, function( item ) {
										resp.push(item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;));
										return {
											label: item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;),
											value: item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;),
											id: item.id  
										} 
									}));
								}
							});
						},
	
						select: function( event, ui ) {
							ui.item.selected = true;
							self._trigger( &quot;selected&quot;, 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( &quot;ui-widget ui-widget-content ui-corner-left&quot; );
	
				input.data( &quot;autocomplete&quot; )._renderItem = function( ul, item ) {
					return $( &quot;<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() {
			$( "#comboboxmotorista").combobox();
		});
	
	&lt;/script&gt;
&lt;/form&gt;
		 &lt;/td&gt;
		&lt;/tr&gt;    
		&lt;tr&gt;
			&lt;td&gt;Veículo:&lt;/td&gt;
			&lt;td&gt; 
		     	
&lt;style type="text/css"&gt;

    .autocomplete{ margin-left: 4px;position: relative;}

   	.Ui-autocomplete {
		height: 50px;
		overflow-y: auto;
		estouro-x: hidden;
		padding-direito: 20px;
	}
	.ui-autocomplete {cursor: default; }	
	.ui-menu  { 
		list-style:none;
		padding: 2px;
		margin: 0;
		display:block;
		float: left;
		position: absolute;
		z-index: 1; 
		overflow-y: auto;
		margin-top: 100px;
		height: 200px;
	}
	.ui-corner-all{
		border-radius: 0px 0px 0px 0px;
	}
	.ui-menu .ui-menu {
		margin-top: 100px;
			height: 50px;
	}
	.ui-menu .ui-menu-item {
		margin:0;
		padding: 0;
		zoom: 1;
		float: left;
		clear: left;
		width: 100%;
	
	}
	.ui-menu .ui-menu-item a {
		text-decoration:none;
		display:block;
		padding:.2em .4em;
		line-height:1.5;
		zoom:1;
	}
	.ui-menu .ui-menu-item a.ui-state-hover,
	.ui-menu .ui-menu-item a.ui-state-active {
		font-weight: normal;
		margin: -1px;
	}
	.ui-combobox {
		position: relative;
		display: inline-block;
	}
	
	.ui-combobox-toggle {
		position: absolute;
		top: 0;
		bottom: 0;
		margin-left: -1px;
		padding: 0;
		/* adjust styles for IE 6/7 */
		*height: 1.7em;
		*top: 0.1em;
	}

	.ui-state-default{
		background: url("") repeat-x scroll 50% 50%;
	    border: 1px solid #C5DBEC;
	    color: #2E6E9E;
	    font-weight: bold;
	    outline: medium none;
	}
	.ui-combobox-input {
		margin: 0;
		padding: 0.3em;
		width:auto;
		background: url("./img/search.gif") no-repeat;
		padding-left: 16px;
		width:250px;
	}
	.ui-corner-left {
		-moz-border-radius-topleft: 0px;
		-webkit-border-top-left-radius: 0px;
		-moz-border-radius-bottomleft: 0px;
		-webkit-border-bottom-left-radius: 0px;
	}
	
&lt;/style&gt;

&lt;form id="formVeiculo" action="/CLog/apontamentoSaida/autocomplete.veiculo" method="POST" accept-charset=utf-8&gt;
	
		&lt;input id="veiculo" type="hidden" name="apontamentoSaida.veiculo.id"  value="apontamentoSaida.veiculo.id"/&gt;
		
	 &lt;div&gt;	
	        &lt;select name="apontamentoSaida.veiculo.id" id="comboboxveiculo" class="cbx"&gt;
		        &lt;option value=""&gt;Selecione&lt;/option&gt;
			        
	        &lt;/select&gt;
	 &lt;/div&gt;    


	&lt;script type="text/javascript" id="veiculoScript"&gt;
	(function( $ ) {
		
		var campoCod = 'i';
		var idComponente = 'veiculo';
		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 = $( "&lt;span&gt;" )
						.addClass( "ui-combobox" )
						.insertAfter( select );
	
				input = $( "&lt;input&gt;&quot; )
					.appendTo( wrapper )
					.val( value )
					.attr('id', 'input'+idComponente)
					.addClass( &quot;ui-state-default ui-combobox-input&quot; )
					.autocomplete({
						delay: 0,
						minLength: 0,
						source: function( request, response ) {
							$.ajax({
								url: &quot;/CLog/apontamentoSaida/autocomplete.veiculo&quot;,
								dataType: &quot;json&quot;,
								data: {
									featureClass: &quot;P&quot;,
									style: &quot;full&quot;,
									maxRows: 12,
									name_startsWith: request.term
								},	
								success: function( data ) {
									resp = [];
									response( $.map( data.list, function( item ) {
										resp.push(item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;));
										return {
											label: item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;),
											value: item.nome + (campoCod.length&gt;1 ? &quot;, &quot; + item.i : &quot;&quot;),
											id: item.id  
										} 
									}));
								}
							});
						},
	
						select: function( event, ui ) {
							ui.item.selected = true;
							self._trigger( &quot;selected&quot;, 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( &quot;ui-widget ui-widget-content ui-corner-left&quot; );
	
				input.data( &quot;autocomplete&quot; )._renderItem = function( ul, item ) {
					return $( &quot;<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() {
			$( "#comboboxveiculo").combobox();
		});
	
	&lt;/script&gt;
&lt;/form&gt;

Certo. Então vamos melhorar esse cara ai.

Isso ai é um plugin jQuery certo?

Então, pegue esse plugin e coloque em um .js separado e receba como parâmetro as configurações que você precisa de diferente em cada um deles (como a URL por exemplo).
Ai você importa uma única vez na sua página e só muda a chamada em cada tag dessa.

O que acontece ai é que é o mesmo código, então o javascript substitui o antigo pelo novo, como você está passando a url, ele a substitui junto.

A ideia é você falar para ele ler essa função uma vez só e ai você só vai chamando com valores diferentes.

Vai ficar MUITO mais leve e rápido.

Sim, é um plugin jQuery com algumas alterações. Vou implementar da forma que você sugeriu. Obrigado!

Eu dei uma mexidinha, mas acho que você vai precisar sobrescrever o método combobox desse plugin para que ele possa receber ‘options’ como parametro e passar para o método ‘_create’.
Isso aqui foi o que eu imaginei mais ou menos… (num arquivo js separado, importado uma vez só…)

[code](function ($) {
var resp = [];
$.widget(“ui.combobox”, {
_create: function (options) {
var campoCod = options.campoCod;
var idComponente = options.idComponente;
var action = options.action;

		var input, self = this,
		select = this.element.hide(),
		selected = select.children(":selected"),
		value = selected.val() ? selected.text() : "",
		wrapper = this.wrapper = $("&lt;span&gt;").addClass("ui-combobox").insertAfter(select);
		input = $("&lt;input&gt;&quot;).appendTo(wrapper).val(value).attr('id', 'input' + idComponente).addClass(&quot;ui-state-default ui-combobox-input&quot;).autocomplete({
			delay: 0,
			minLength: 0,
			source: function (request, response) {
				$.ajax({
					url: action,
					dataType: &quot;json&quot;,
					data: {
						featureClass: &quot;P&quot;,
						style: &quot;full&quot;,
						maxRows: 12,
						name_startsWith: request.term
					},
					success: function (data) {
						resp = [];
						response($.map(data.list, function (item) {
							resp.push(item.nome + (campoCod.length &gt; 1 ? &quot;, &quot; + item[campoCod] : &quot;&quot;));
							return {
								label: item.nome + (campoCod.length &gt; 1 ? &quot;, &quot; + item[campoCod] : &quot;&quot;),
								value: item.nome + (campoCod.length &gt; 1 ? &quot;, &quot; + item[campoCod] : &quot;&quot;),
								id: item.id
							}
						}));
					}
				});
			},
			select: function (event, ui) {
				ui.item.selected = true;
				self._trigger(&quot;selected&quot;, 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(&quot;ui-widget ui-widget-content ui-corner-left&quot;);
		input.data(&quot;autocomplete&quot;)._renderItem = function (ul, item) {
			return $(&quot;<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);
[/code]
Ai sua chamada fica assim: (na sua taglib)

$(function () { $(".cbx").combobox({action:'&lt;c:url value="${action}"/&gt;', campoCod:'${campoCodigo}', idComponente:'${id}'}); });

Rafeal, fiz as alterações porém não está funcionando. Não gera erro de importação do JS e nem chama os eventos. O que está faltando fazer?

Segue em anexo o arquivo css e o JS.

Segue abaixo o código da tag:

&lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt;
&lt;%@ tag language="java" body-content="empty" pageEncoding="ISO-8859-1" dynamic-attributes="attrs"%&gt;
&lt;%@ attribute name="action" description="action do form" required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="method" description="método do formulário" required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="formId" description="id do form" required="false" type="java.lang.String"%&gt;
&lt;%@ attribute name="id" description="id do componente" required="false" type="java.lang.String"%&gt;
&lt;%@ attribute name="bean" description="tipo de bean: cliente, viagem..." required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="valueRecebe" description="nome do campo que receberá valor do controller" required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="valueSubmete" description="nome do campo que enviará o valor para o controller" required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="campoCodigo" description="nome do campo do código que também deve ser exibido" required="false" type="java.lang.String"%&gt;
&lt;%@ attribute name="listaCombo" description="lista de valores a receber do controller" required="true" type="java.util.List"%&gt;

&lt;c:set var="idForm" value=""/&gt;
&lt;c:if test="${not empty formId}"&gt;
	&lt;c:set var="idForm"&gt;id="${formId}"&lt;/c:set&gt;
&lt;/c:if&gt;
&lt;c:if test="${empty id}"&gt;
	&lt;c:set var="id"&gt;idCampo&lt;/c:set&gt;
&lt;/c:if&gt;
&lt;c:if test="${empty campoCodigo}"&gt;
	&lt;c:set var="campoCodigo"&gt;i&lt;/c:set&gt;
&lt;/c:if&gt;

&lt;form ${idForm} action="&lt;c:url value="${action}"/&gt;&quot; method=&quot;POST&quot; accept-charset=utf-8&gt;
	
		&lt;input id="${id}" type="hidden" name="${bean}.id"  value="${bean}.id"/&gt;
		
	 &lt;div&gt;	
	        &lt;select name="${valueSubmete}" id="combobox${id}" class="cbx"&gt;
		        &lt;option value=""&gt;Selecione&lt;/option&gt;
			        &lt;c:forEach var="item" items="${listaCombo}"&gt;
						&lt;c:choose&gt;
						    &lt;c:when test="${item.id == valueRecebe}"&gt; 
			                  	&lt;option value="${item.id}" selected="selected"&gt; ${item.nome}&lt;/option&gt;  
					    	&lt;/c:when&gt;
					    	&lt;c:otherwise&gt;
								&lt;option value="${item.id}"&gt;${item.nome}&lt;/option&gt;    
					    	&lt;/c:otherwise&gt;
					    &lt;/c:choose&gt;	
			        &lt;/c:forEach&gt;
	        &lt;/select&gt;
	 &lt;/div&gt;    
&lt;/form&gt;
&lt;link href="&lt;c:url value="/css/comboAutocomplete.css"/&gt;&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot; /&gt;
&lt;script type="text/javascript" src="&lt;c:url value="/js/comboAutocomplete.js"/&gt;&quot;&gt;&lt;/script&gt;

Não cara… Primeiro, dá uma lida em todo o post que eu postei antes desse (principalmente o código JS).

A ideia é a seguinte:
FORA da sua tag, ou seja, em qualquer outra página da aplicação, você chama o JS.
Não dá para ter EL no javascript pois ele é lido pelo browser e a EL é lida pela servlet. São etapas diferentes…

DENTRO da sua tag fica só a chamada do método…

Ok! Escrevi o post acima e não vi a sua resposta. Fiz como você sugeriu e agora está dando um erro no firebug, parece ser simples, porém não consigo resolver:

TypeError: options is undefined
	var campoCod = options.campoCod;

Foi por isso que eu disse isso aqui:

Tenta fazer isso e ve se consegue.

Agora complicou, meu conhecimento em javascript ainda é superficial e preciso disso para ontem! Rs! Não sei se vou conseguir. Obrigado pela ajuda!!!

Me passa o código desse plugin.

Abaixo segue o código da taglib:

&lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt;
&lt;%@ tag language="java" body-content="empty" pageEncoding="ISO-8859-1" dynamic-attributes="attrs"%&gt;
&lt;%@ attribute name="action" description="action do form" required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="method" description="método do formulário" required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="formId" description="id do form" required="false" type="java.lang.String"%&gt;
&lt;%@ attribute name="id" description="id do componente" required="false" type="java.lang.String"%&gt;
&lt;%@ attribute name="bean" description="tipo de bean: cliente, viagem..." required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="valueRecebe" description="nome do campo que receberá valor do controller" required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="valueSubmete" description="nome do campo que enviará o valor para o controller" required="true" type="java.lang.String"%&gt;
&lt;%@ attribute name="campoCodigo" description="nome do campo do código que também deve ser exibido" required="false" type="java.lang.String"%&gt;
&lt;%@ attribute name="listaCombo" description="lista de valores a receber do controller" required="true" type="java.util.List"%&gt;

&lt;c:set var="idForm" value=""/&gt;
&lt;c:if test="${not empty formId}"&gt;
	&lt;c:set var="idForm"&gt;id="${formId}"&lt;/c:set&gt;
&lt;/c:if&gt;
&lt;c:if test="${empty id}"&gt;
	&lt;c:set var="id"&gt;idCampo&lt;/c:set&gt;
&lt;/c:if&gt;
&lt;c:if test="${empty campoCodigo}"&gt;
	&lt;c:set var="campoCodigo"&gt;i&lt;/c:set&gt;
&lt;/c:if&gt;

&lt;form ${idForm} action="&lt;c:url value="${action}"/&gt;&quot; method=&quot;POST&quot; accept-charset=utf-8&gt;
	
		&lt;input id="${id}" type="hidden" name="${bean}.id"  value="${bean}.id"/&gt;
		
	 &lt;div&gt;	
	        &lt;select name="${valueSubmete}" id="combobox${id}" class="cbx"&gt;
		        &lt;option value=""&gt;Selecione&lt;/option&gt;
			        &lt;c:forEach var="item" items="${listaCombo}"&gt;
						&lt;c:choose&gt;
						    &lt;c:when test="${item.id == valueRecebe}"&gt; 
			                  	&lt;option value="${item.id}" selected="selected"&gt; ${item.nome}&lt;/option&gt;  
					    	&lt;/c:when&gt;
					    	&lt;c:otherwise&gt;
								&lt;option value="${item.id}"&gt;${item.nome}&lt;/option&gt;    
					    	&lt;/c:otherwise&gt;
					    &lt;/c:choose&gt;	
			        &lt;/c:forEach&gt;
	        &lt;/select&gt;
	 &lt;/div&gt;    
&lt;/form&gt;
&lt;script type="text/javascript" src="&lt;c:url value="/js/comboAutocomplete.js"/&gt;&quot;&gt;&lt;/script&gt;
&lt;link href="&lt;c:url value="/css/comboAutocomplete.css"/&gt;&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot; /&gt;
&lt;script&gt;
	$(function () {
		$(".cbx").combobox({action:'&lt;c:url value="${action}"/&gt;', campoCod:'${campoCodigo}', idComponente:'${id}'});
	});
&lt;/script&gt;

Em anexo está o css e o js do plugin.

Obrigado por ajudar. O legal que o código ficará para a comunidade também.

Tenta fazer com o seu plugin assim:

(function ($) {
	var resp = [];
	$.widget("ui.combobox", {
		options: { // Default options
			action: null,
			campoCod: null,
			idComponente: null
		},
		_setOption: function(key, value) { // Changes option
			this.options[key] = value; // Verifique se precisa dessa linha...
		},
		_create: function () {
			var campoCod = this.options.campoCod;
			var idComponente = this.options.idComponente;
			var action = this.options.action;
			var input, self = this,
			select = this.element.hide(),
			selected = select.children(":selected"),
			value = selected.val() ? selected.text() : "",
			wrapper = this.wrapper = $("&lt;span&gt;").addClass("ui-combobox").insertAfter(select);
			input = $("&lt;input&gt;&quot;).appendTo(wrapper).val(value).attr('id', 'input' + idComponente).addClass(&quot;ui-state-default ui-combobox-input&quot;).autocomplete({
				delay: 0,
				minLength: 0,
				source: function (request, response) {
					$.ajax({
						url: action,
						dataType: &quot;json&quot;,
						data: {
							featureClass: &quot;P&quot;,
							style: &quot;full&quot;,
							maxRows: 12,
							name_startsWith: request.term
						},
						success: function (data) {
							resp = [];
							response($.map(data.list, function (item) {
								resp.push(item.nome + (campoCod.length &gt; 1 ? &quot;, &quot; + item[campoCod] : &quot;&quot;));
								return {
									label: item.nome + (campoCod.length &gt; 1 ? &quot;, &quot; + item[campoCod] : &quot;&quot;),
									value: item.nome + (campoCod.length &gt; 1 ? &quot;, &quot; + item[campoCod] : &quot;&quot;),
									id: item.id
								}
							}));
						}
					});
				},
				select: function (event, ui) {
					ui.item.selected = true;
					self._trigger(&quot;selected&quot;, 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(&quot;ui-widget ui-widget-content ui-corner-left&quot;);
			input.data(&quot;autocomplete&quot;)._renderItem = function (ul, item) {
				return $(&quot;<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);

O restante fica como está…

Fiz as alterações. Agora o plugin aplica a url da action da primeira tag para as outras duas. Também testei sem a linha:

this.options[key] = value; // Verifique se precisa dessa linha... 

Você está importando o JS uma vez só, correto?

Pode me mostrar o trecho aonde você faz esse import?

Ele ainda está colocando a última URL?

Tenta limpar o cache e veja se não é esse problema…

No final da taglib estou fazendo o import:

&lt;form ${idForm} action="&lt;c:url value="${action}"/&gt;&quot; method=&quot;POST&quot; accept-charset=utf-8&gt;
	
		&lt;input id="${id}" type="hidden" name="${bean}.id"  value="${bean}.id"/&gt;
		
	 &lt;div&gt;	
	        &lt;select name="${valueSubmete}" id="combobox${id}" class="cbx"&gt;
		        &lt;option value=""&gt;Selecione&lt;/option&gt;
			        &lt;c:forEach var="item" items="${listaCombo}"&gt;
						&lt;c:choose&gt;
						    &lt;c:when test="${item.id == valueRecebe}"&gt; 
			                  	&lt;option value="${item.id}" selected="selected"&gt; ${item.nome}&lt;/option&gt;  
					    	&lt;/c:when&gt;
					    	&lt;c:otherwise&gt;
								&lt;option value="${item.id}"&gt;${item.nome}&lt;/option&gt;    
					    	&lt;/c:otherwise&gt;
					    &lt;/c:choose&gt;	
			        &lt;/c:forEach&gt;
	        &lt;/select&gt;
	 &lt;/div&gt;    
&lt;/form&gt;
&lt;script type="text/javascript" src="&lt;c:url value="/js/comboAutocomplete.js"/&gt;&quot;&gt;&lt;/script&gt;
&lt;link href="&lt;c:url value="/css/comboAutocomplete.css"/&gt;&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot; /&gt;
&lt;script&gt;
	$(function () {
		$(".cbx").combobox({action:'&lt;c:url value="${action}"/&gt;', campoCod:'${campoCodigo}', idComponente:'${id}'});
	});
&lt;/script&gt;

Antes ele chamava, em todos os combos, a url do terceiro combobox. Agora ele usa a url do primeiro combobox para todos.

Já limpei o cache do navegador.

Não!! Essas duas linhas ficam no cabeçalho.
Alguns pontos sobre elas:
1 - É bem legal o css vir antes do javascript, então inverta a ordem.
2 - Isso deve ficar no seu header.jsp onde o css fica abaixo do css do jquery ui e o js fica abaixo do javascript do jquery ui. (OBRIGATORIAMENTE).
3 - Quando você coloca alguma coisa na taglib, essa coisa será executada toda vez que você chamar a taglib. Ou seja, você esta importando a css e o javascript várias vezes… Isso é bem ruim…
4 - Tome bastante cuidado com coisas desnecessárias na sua taglib pois você vai estar chamando isso sempre.
5 - Eu, particularmente, não uso taglib próprias, somente as ‘core’ e as ‘format’. Quando eu tenho alguma coisa que se repete muito, eu tento melhorar com javascript ou de outra forma.

&lt;script type="text/javascript" src="&lt;c:url value="/js/comboAutocomplete.js"/&gt;&quot;&gt;&lt;/script&gt; &lt;link href="&lt;c:url value="/css/comboAutocomplete.css"/&gt;&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot; /&gt;

Fiz as alterações conforme você indicou e segue igual.