Modifica della larghezza di jquery-ui widget di completamento automatico personalizzato

Question

Sto lavorando con mutiple i widget jQuery completamento automatico-ui su una pagina e vogliono essere in grado di impostare la larghezza di ciascuno singolarmente. Attualmente, lo sto facendo in questo modo:

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

Il che non è davvero una soluzione in quanto l'utente è in grado di innescare vari autocompletes in diversi ordini, e questo codice solo stili di loro in base nell'ordine in cui vengono aggiunti al DOM.

Quando completamento automatico è innescato, sembra creare una <ul> e poi posizionarlo sotto la casella di input che ha innescato. Purtroppo, non riesco a trovare nessuna identificatori univoci in questo <ul> generato di attaccarsi a ed applicare alcuni CSS.

Il mio problema è diverso da questo , dal momento che sto utilizzando solo il completamento automatico di default, e non il completamento automatico-combobox.

Inoltre, scavare nel <ul> automatico e corrispondenti diverse larghezze casella di completamento automatico con i valori all'interno l'elenco non funziona, poiché i valori sono generati dinamicamente.

Tutte le idee?

Answer 1

I risolto questo problema utilizzando l'evento 'aperto' a disposizione. Avevo bisogno di un modo per impostare dinamicamente la larghezza, insieme ad altri elementi e non voleva markup aggiuntivo.

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

Answer 2

Mi piace la risposta di luqui. Ma se siete in una situazione in cui non è possibile utilizzare la funzione appendTo (potrebbe essere dovuto al troppo pieno nascosto, ecc), è possibile utilizzare il codice qui sotto per assicurarsi che si stanno facendo modifiche alla lista corretta.

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

Rif: http://docs.jquery.com/UI/Autocomplete#method- widget di

Answer 3

Se si dispone di più controlli che l'uso di completamento automatico, una soluzione ragionevolmente elegante è quello di recuperare il widget attaccato al controllo all'ultimo momento e modificare la sua CSS:

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

Demo .

Come menzionato sopra, la larghezza di completamento automatico lista è calcolato all'ultimo momento, quindi, si deve modificare, nel open evento.

Answer 4

È possibile ottenere "ui-menu" widget di allegato al <input> avendo completamento automatico nel rispetto delle $('#myinput').data("autocomplete").menu. Quindi, per modificare la larghezza è possibile utilizzare

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

Answer 5

Si potrebbe avvolgere la casella di inserimento che sta provocando il completamento automatico in un div, danno il div uno specifico ID, e quindi aggiungere l'auto ul completo che div piuttosto che al corpo del documento. In questo modo è possibile destinare con css in base al 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

Senza usare codice extra Javascript, è possibile utilizzare uno semplice linea CSS:

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

Quindi, perché fa questo lavoro con min-width

Semplicemente perché width viene sovrascritta dal JS, a volte anche con soluzioni che utilizzano open: function(event, ui) { ... } (come di rkever risposta , che ha fatto non funziona nel mio caso). Tuttavia, min-width non è sovrascritto , quindi è utile.

Inoltre, se si fa non si desidera utilizzare !important, è possibile ulteriore dettaglio la regola con le classi rimanenti:

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

Questo mi ha evitato ulteriori JS hack, spero che aiuta!

Answer 7

mi piace @ Martin Lögdberg risposta, ma se si sta utilizzando fissi larghezze di dimensioni piuttosto che fare alcuni matematica fantasia sui risultati restituiti per impostare la larghezza, allora si potrebbe anche solo impostare la larghezza in CSS

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

Answer 8

Un miglioramento su Martin Lögdberg risposta. Questo ha funzionato meglio per me perché ho avuto molte caselle di testo nella pagina

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

Answer 9

Lettura API, ho appena aggiungere una classe ui-front a div del mio ingresso , e che funziona bene con i genitori.

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

qui :

  

[...] i genitori del campo di input saranno controllati per una classe di    ui-front . Se viene trovato un elemento con la classe ui-front, menu   verrà aggiunto a tale elemento . Indipendentemente dal valore, se non   elemento viene trovato, il menu verrà aggiunto al corpo.

L'elemento allegata determinare la posizione e la larghezza del menu.

Answer 10

Come di jQuery UI 1.10, il completamento automatico widget è stato riscritto utilizzando il widget di fabbrica . Come parte di questo, il completamento automatico contiene ora una _resizeMenu punto di estensione, che viene chiamato quando dimensionamento del menù prima di visualizzare.

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

Answer 11

Sono riuscito a risolvere questo con i CSS aggiungendo galleggiante al menu di completamento automatico.

.ui-autocomplete { float: left; }

Dato che il menu di completamento automatico è absolute posizionato e un figlio diretto della <body>. Credo che ottiene di larghezza massima dal corpo, e dal momento che di posizione assoluta non può essere visualizzata come inline-block per evitare di prendere tutto lo spazio disponibile.

Anche .ui-autocomplete { width: 1%; } sembra funzionare.