Riposizionamento dell'interfaccia utente jQuery sul ridimensionamento del browser

Question

C'è un problema se apri un menu a discesa di completamento automatico e ridimensiona anche la finestra del browser, il menu a discesa del completamento automatico non viene riposizionato. Evidenziato in questo video: http://www.youtube.com/watch?v=d7rZYH0DgWE

ho guardato la documentazione e non riesco a trovare un metodo riposizionamento (nella documentazione jquery-ui http://jqueryui.com/demos/autocomplete) che può essere definito all'interno di una chiamata di funzione $ (window) .resize().

C'è un'elegante anima a questo?

Answer 1

Guardando a questo nuovo un modo per risolvere questo problema è sufficiente chiamare il campo di completamento automatico per cercare di ridimensionamento:

esempio

$(window).resize(function() { 
    $("#autocomplete-field").autocomplete("search"); 
}); 

Questo riposizionerà il menu a discesa del completamento automatico.

Si consiglia inoltre di assicurarsi che il completamento automatico memorizza nella cache i risultati in modo che non colpiscano il database durante la ricerca di nuovo. Un'altra cosa da considerare è chiamare il completamento automatico ("ricerca") all'interno di una funzione di timeout per migliorare la reattività dell'interfaccia utente Cross-browser window resize event - JavaScript/jQuery

Answer 2

Sì, è possibile, ma è molto difficile. È necessario modificare sia il css che il plugin. La sua funzionalità predefinita imposta gli attributi superiore e destro. È necessario modificare il plug-in per posizionare div (o ul) relativamente alla larghezza e all'altezza del documento. (ovvero in alto: 50%, a destra: 50%; margin-left: -500px; margin-top: -100px).

È anche possibile distruggere la divisione su ridimensionamento se non si vuole rovinarlo. Si riapparirà sui cambiamenti sulla base di nuove larghezza e altezza del documento

Answer 3

Chiamare per me il campo di completamento automatico per la ricerca su ridimensionamento. Una cosa da aggiungere: assicurati che la ricerca venga eseguita solo al ridimensionamento quando un risultato di ricerca è visibile. Altrimenti, la ricerca viene eseguita anche dopo aver selezionato un elemento dalla casella dei risultati.

Answer 4

Suggerirei di chiudere i risultati su un ridimensionamento della pagina.

$(window).resize(function() { 
    $(".ui-autocomplete").css('display', 'none'); 
}); 

Quando un uso cambia la larghezza della finestra scomparirà e se si digita nuovamente riappare come dovrebbe, posizionato correttamente.

Answer 5

Ecco un'altra soluzione se non si desidera ripetere la ricerca o chiudere la finestra.

$(window).resize(function() { 
    var position = $("#autocompleteField").position(); 
    var properties = { left: position.left, 
        top: position.bottom }; 
    $(".ui-autocomplete").css(properties); 
});