Alteração da largura dos widgets de preenchimento automático JQuery-UI individualmente

Question

Estou trabalhando com widgets de preenchimento automático JQuery-UI Mutiple JQuery em uma página e quero poder definir as larguras de cada um individualmente. Atualmente, estou fazendo assim:

$($('.ui-autocomplete')[0]).width(150);
$($('.ui-autocomplete')[1]).width(105);
$($('.ui-autocomplete')[2]).width(80);

O que não é realmente uma solução, pois o usuário é capaz de acionar vários preenchimentos autocompletos em pedidos diferentes, e esse código apenas os estiliza com base na ordem em que são adicionados ao DOM.

Quando o preenchimento automático é acionado, parece criar um <ul> e depois posicione -o sob a caixa de entrada que o acionou. Infelizmente, não consigo encontrar nenhum identificador exclusivo neste gerado <ul> Para travar e aplicar alguns CSs.

Meu problema é diferente de Este, já que estou usando apenas o preenchimento automático padrão, e não o autocombobox.

Além disso, cavando o preenchimento automático <ul> e combinar diferentes larguras da caixa de preenchimento automático com os valores dentro da lista também não funciona, pois os valores são gerados dinamicamente.

Alguma ideia?

Answer 1

Resolvi esse problema usando o evento 'aberto' disponível. Eu precisava de uma maneira de definir dinamicamente a largura, juntamente com outros itens e não queria marcação extra.

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    open: function() { $('#div .ui-menu').width(300) }  
});

Answer 2

Eu gosto da resposta de Luqui. Mas se você estiver em uma situação em que não pode usar o recurso Apêndo (pode ser devido ao excesso de hidden etc.), você pode usar o código abaixo para garantir que esteja fazendo alterações na lista correta.

$('#input').autocomplete({  
    source: mysource,  
    open: function() { 
        $('#input').autocomplete("widget").width(300) 
    }  
});

Ref: http://docs.jquery.com/ui/autocomplete#method-widget

Answer 3

Se você possui vários controles que usam preenchimento automático, uma solução razoavelmente elegante é recuperar o widget anexado ao controle no último momento e modifique seus CSs:

$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: source
    });
    $("input#Bar").autocomplete({
        source: source,
        open: function(event, ui) {
            $(this).autocomplete("widget").css({
                "width": 400
            });
        }
    });
});

Visão Demonstração.

Como mencionado acima, a largura da lista de preenchimento automático é calculada no último momento, portanto, você deve modificá -lo no open evento.

Answer 4

Você pode obter o widget "ui-menu" anexado ao <input> tendo preenchimento automático com relação a $('#myinput').data("autocomplete").menu. Então, para mudar a largura que você pode usar

$('#myinput').autocomplete({
    source: yourUrlOrOtherSource,
    open: function () {
        $(this).data("autocomplete").menu.element.width(80);
    }
});

Answer 5

Você pode embrulhar a caixa de entrada que está acionando o recompensa automática em uma div, dê ao DIV um ID específico e, em seguida, anexar o UL automático completo a essa div em vez de ao corpo do documento. Dessa forma, você pode atingir -o com CSS com base na div.

<!- this is how i would set up the div -->
<div class='autoSuggestWrapper' id='wrapper1'>
     <input class='autocomplete'>
</div>
<script>/* this is a way to config the autocomplete*/
   $( ".autocomplete" ).autocomplete({ appendTo: ".autoSuggestWrapper" });
</script> 

Answer 6

Sem usar o código JavaScript extra, você pode usar 1 linha CSS simples:

<style type="text/css">
    .ui-menu,.ui-menu>.ui-menu-item,.ui-menu-item>a {min-width:800px !important}
</style>

Então, por que isso funciona com largura min?

Simplesmente porque width é sobrescrito pelo JS, às vezes até com soluções que usam open: function(event, ui) { ... } (Curti Resposta de Rkever, que não funcionou no meu caso). No entanto, min-width não é substituído, então é útil.

Além disso, se você fizer não quero usar !important, você pode detalhar ainda mais a regra com as demais classes:

.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all,.ui-menu>.ui-menu-item,.ui-menu-item>a
 {min-width:800px}

Isso me evitou mais hacks JS, espero que ajude!

Answer 7

Eu gosto da resposta @martin lögdberg, mas se você estiver usando larguras de tamanho fixo em vez de fazer algumas matemáticas sofisticadas nos resultados retornados para definir a largura, você também pode simplesmente definir a largura no CSS

ul .ui-autocomplete {
  width: 50%;
}

Answer 8

Uma melhoria sobre a resposta de Martin Lögdberg. Isso funcionou melhor para mim porque eu tinha muitas caixas de texto na página

$('.some-class').each(function(){
   var txt = $(this);
   txt.autocomplete({  
      source: mysource,  
      open: function() { 
          txt.autocomplete("widget").width(txt.outerWidth());
      }
   });  
});

Answer 9

Lendo API, acabei de adicionar uma aula Ui-Front para o pai div do meu entrada, e isso funciona bem.

<div class="ui-front">
    <label for="autosample" class="required">example</label>
    <input name="autosample" class="default-autocomplete" type="text">
</div>

Ver aqui :

...] Os pais do campo de entrada serão verificados para uma classe de Ui-Front. Se um elemento com a classe de frente à UI for encontrado, é encontrado, O menu será anexado a esse elemento. Independentemente do valor, se nenhum elemento for encontrado, o menu será anexado ao corpo.

O elemento anexado determina a posição e a largura do menu.

Answer 10

A partir da interface do usuário do jQuery 1.10, o widget de preenchimento automático foi reescrito usando o fábrica de widgets. Como parte disso, o preenchimento automático agora contém um _resizeMenu Ponto de extensão, que é chamado ao dimensionar o menu antes de exibir.

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    _resizeMenu: function() {
        this.menu.element.outerWidth( 500 );
    }
});

Answer 11

Consegui resolver isso com o CSS adicionando flutuação ao menu de preenchimento automático.

.ui-autocomplete { float: left; }

Como o menu de preenchimento automático está posicionado absolute e um filho direto do <body>. Eu acho que recebe sua largura máxima do corpo e, como é a posição absoluta, ele não pode ser exibido como bloco embutido para evitar obter todo o espaço disponível.

Também .ui-autocomplete { width: 1%; } parece funcionar.