JQuery自動完成組合框 - 自動調整

Question

我正在使用jquery autocomplete combobox。我希望它自動調整到與它所替換的下拉菜單相同的大小。相反，目前它只是默認爲一個寬度，而不是像默認情況下使用html下拉列表那樣的內容寬度。

感謝您的幫助......

Answer 1

這是自動完成我的 「打開」 選項，自動調整大小（autowidth）：

  open: function(e,ui) { 
       var autoData = $(this).data('autocomplete'); 
       var reserText = ",de,del,el,la,las,los,en,"; 

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

        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','width':'276px','text-align':'left'}); 

        if(fila.index()%2 > 0){ 
         fila.find('a').css({'background-color':'#EFEFEF'}); 
        } 
       } 

見部分從「// Ahora VAMOS一個calcular el ancho de la cadenamásancha para saberquéancho tiene que tener el combo。「

希望這可以幫助你。

Answer 2

我已經提交了一個完全適用於此場景的答案，其中啓動的組合框的大小與其替換的選擇列表的寬度相同。

嘗試this link to another thread。

它使用select元素的寬度而不是列表中的文本。

我也可以用函數來處理document.body字體大小的變化。

問候。