前例:
- jquery-ui-1.9.0.custom.min.css
- jquery-1.8.2.js
- jquery-ui-1.9.0.custom.min.js
コードは次のとおりです。
$("#origen, #destino").autocomplete({
source: function(request, response){
$("#cargando").show();
// Para distinguir la cache del elemento origen y destino ya que van a jsp's diferentes. tolo (03/07/2012)
var term = request.term; var termCache = request.term + "-" + $(this.element).attr("id");
if ( termCache in cache ) {
response( cache[ termCache ] );
setTimeout("$('#cargando').hide();", 2000);//ocultamos con retraso 2 seg
return; }
if($(this.element).attr("id") == "origen"){
// El filtro de aeropuertos por pais es solo para el origen
if (parent.codMarca == 'NET')
paises = '|PT|ES|';
urlxx = "../../jsp/buscador/autocompletevuelos.jsp?sesion=" + sesion + "&term=" + term + "&codidi=" + codidi +
"&tipPro=VH&paises=" + codpai + "&codEmp=" + parent.codEmp + "&codMarca=" + parent.codMarca + "&codWcn=" +
parent.codWcn + "&orides=O"; }else{
urlxx = "../../jsp/buscador/autocompletepoblaciones.jsp?sesion=" + sesion +
"&term=" + term +
"&codidi=" + codidi +
"&tipoProducto=VH&codemp=" + codEmp +
"&codwcn=" + codWcn + "&codMarca=" + parent.codMarca; }
lastXhr = $.getJSON( urlxx, request, function( data, status, xhr ) {
cache[ termCache ] = data;
if ( xhr === lastXhr ) {
response( data );
setTimeout("$('#cargando').hide();", 2000);//ocultamos con retraso 2 seg
}
});
},
minLength: 2,
select: function(event, ui) {
var componente = $(this).attr("id");
if (ui.item) {
// El check de residente sólo tiene que estar habilitado cuando los dos aeropuertos son españoles, y al menos uno de ellos
// consta como residente.
if(componente == "origen"){
$("#oriCodApt").val(ui.item.id);
$("#orideszona").val(ui.item.value);
$("#oricodpai").val(ui.item.codpai.toUpperCase());
$("#oriresidente").val(ui.item.residente.toUpperCase());
}else{
$("#desCodApt").val(ui.item.codapt);
$("#desdeszona").val(ui.item.value);
$("#descodpai").val(ui.item.codpai.toUpperCase());
$("#desresidente").val(ui.item.residente.toUpperCase());
$("#zonaCodificada").val( ui.item.codpai.toUpperCase() + "#" +
ui.item.codepr.toUpperCase() + "#" +
ui.item.codpob.toUpperCase() + "#" +
ui.item.codare.toUpperCase());
$("#numAeropuertos").val(ui.item.numAeropuertos == undefined ? 0 : ui.item.numAeropuertos);
$("#fueraCiudad").val(ui.item.fueraCiudad == undefined ? "" : ui.item.fueraCiudad);
}
validaResidente();
}
},
open: function(e,ui) {
var autoData = $(this).data('autocomplete');
var reserText = ",de,del,el,la,las,los,en,";
var altoCombo = 200; // Altura del combo del autocomplete.
var componente = $(this).attr("id");
autoData.menu.element.css({'width':'' + anchoMinimo + 'px'});
autoData.menu.element.find('li').each(function() {
var fila = $(this);
var texto = fila.text().toLowerCase().replace(autoData.term.toLowerCase(), "<b>" + autoData.term.toLowerCase() + "</b>");
var autoText = "";
texto = texto.split(" ");
for(var i = 0; i < texto.length; i++){
if((reserText.indexOf( texto[i].replace("<b>","").replace("</b>","") ) != "-1") && (i > 0)){
autoText += texto[i] + " ";
}else if( texto[i].substring(0,3) == "<b>" ){
autoText += "<b>" + texto[i].charAt(3).toUpperCase() + texto[i].substring(4) + " ";
}else{
autoText += texto[i].charAt(0).toUpperCase() + texto[i].substring(1) + " ";
}
}
autoText = autoText.replace(" De "," de ").replace(" Del "," del ").replace(" Los "," los ").replace(" El "," el ").replace(" En "," en").replace(" La "," la ").replace(" Las "," las ");
// El código de aeropuerto, lo que va entre paréntesis, tiene que salir en mayúsculas.
if(componente == "origen"){
var tamPrimerCorte = autoText.split("(").length;
var textoEnParentesis = autoText.split("(")[tamPrimerCorte - 1];
textoEnParentesis = textoEnParentesis.split(")")[0];
autoText = autoText.replace("(" + textoEnParentesis + ")", "(" + textoEnParentesis.toUpperCase() + ")");
}
fila.find('a').text("");
fila.find('a').append( autoText );
// Ahora vamos a calcular el ancho de la cadena más ancha para saber qué ancho tiene que tener el combo.
ancho = autoText.length * 5; // Con esta fuente de letra, en IE, etc...
if(ancho > anchoFilaDestinos){
anchoFilaDestinos = ancho;
}
// Fin del cálculo del ancho.
fila.find('a').css({'white-space':'nowrap'});
});
// Hay que mantener un ancho mínimo.
if(anchoFilaDestinos < anchoMinimo){
anchoFilaDestinos = anchoMinimo;
}
numItems = 0;
// Hay que recorrer todas las filas otra vez, para ponerles a todas el mismo ancho.
autoData.menu.element.find('li').each(function() {
var fila = $(this);
fila.find('a').css({'white-space':'nowrap','width':'' + anchoFilaDestinos + 'px','text-align':'left'});
numItems++;
});
anchoFilaDestinos += 9;
autoData.menu.element.css({'width':'' + anchoFilaDestinos + 'px'});
anchoFilaDestinos = 0;
// Porque 9 son los que caben en 200 de alto.
if(numItems < 9){
altoCombo = numItems * 23;
$(".ui-autocomplete").css("height", altoCombo).css("overflow-y", "hidden").css("overflow-x", "hidden");
}else{
$(".ui-autocomplete").css("height", altoCombo).css("overflow-y", "scroll").css("overflow-x", "hidden");
}
},
error : function() {
if ( $(this).attr("id") == "origen" ){
parent.crearModal('Alerta', '<ml:message id="1" value="Hay un error en la peticion de ORIGEN."/>');
} else {
parent.crearModal('Alerta', '<ml:message id="2" value="Hay un error en la peticion de DESTINO."/>');
}
},
autoFocus: true,
focus: function(event, ui){
if (ui.item) {
var codzon = "P:" + ui.item.codpai + "#" + ui.item.codepr + "#" + ui.item.codpob + "#" + ui.item.codare;
if($(this).attr("id") == "origen"){
$("#oricodzona").val(codzon);
$("#orideszona").val(ui.item.value);
}else{
$("#descodzona").val(codzon);
$("#desdeszona").val(ui.item.value);
}
} else {
if($(this).attr("id") == "origen"){
$("#oricodzona").val("");
}else{
$("#descodzona").val("");
}
}
}
});
最後に、ご覧のとおり、オプション autoFocus:true ですが、リストが正しく入力されていても機能しません。
助けてください。