Question

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

感谢您的帮助......

Answer 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 lacadenamássanchaparasaberquéanchotiene que tener el combo”中的部分。

希望这会对你有所帮助。

Answer 2

我已经提交了一个完全符合这种情况的答案，其中当启动的组合框的大小调整为他们正在替换的选择列表的宽度时。

尝试 this link to another thread 。

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

我也可以通过函数扩展它来处理document.body字体大小的变化。

问候。

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

2 个答案: