JQuery 自动完成组合框 - 自动调整大小答案

【问题标题】：JQuery autocomplete combobox - autosizeJQuery 自动完成组合框 - 自动调整大小
【发布时间】：2012-02-22 20:49:18
【问题描述】：

我正在使用jquery autocomplete combobox。我希望它自动调整为与它正在替换的下拉列表相同的大小。相反，目前它只是默认为一个宽度，而不是像 html 下拉列表默认情况下那样的内容宽度。

感谢您的帮助...

【问题讨论】：

【解决方案1】：

这是我的自动完成“打开”选项，带有自动大小（自动宽度）：

            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 a calcular el ancho de la cadena más ancha para saber qué ancho tiene que tener el combo”的部分。

希望对你有所帮助。

【讨论】：

【解决方案2】：

我已经针对这种情况提交了一个答案，当启动的组合框的大小与它们要替换的选择列表的宽度相同。

试试this link to another thread。

它使用选择元素宽度而不是列表中的文本。

我还能够使用处理 document.body 字体大小更改的函数来扩展它。

问候。

【讨论】：