2012-10-17 72 views
0

前因:jQuery UI的1.9.0自動完成對焦工作不

  • 的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(""); 
      }   
     }  
    } 
}); 

最後,你可以看到,選擇自動對焦:真實的,但它不能正常工作,甚至列表被正確地填滿。

請,任何幫助嗎?

+0

我試圖格式化你的代碼 - 請回滾,如果我把事情搞得一團糟。 –

+0

如果你在'open'事件處理程序中刪除你的代碼,你還有問題嗎?該代碼是否可能與'autoFocus'的作用相沖突? –

回答

0

好吧,autoanswering:你必須刪除德selectFirst條款,包括自動對焦之前。