Question

I am using the jquery autocomplete combobox. I would like it to autosize to the same size as the dropdown it is replacing. Instead currently it just defaults to one width, instead of the content width like it happens by default with the html dropdown list.

Thanks for any help…

Answer 1

This is my “open” option for the autocomplete, with autosize (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'});   
                   }
                }

See the part from “// Ahora vamos a calcular el ancho de la cadena más ancha para saber qué ancho tiene que tener el combo.”

Hope this helps you.