Creare nodo in cima al body

[bANART]

Ciao a tutti!! ...e BUON ANNO!!

Ho un problema che mi porto avanti dall'anno scorso!

Grazie a qusto codice java script è possibile creare la ormai classica tendina di suggerimento su campo input, in stile Google per intenderci.

Funziona alla grande, l'unico problema è che per calcolare la posizione appena sotto il campo input prende come riferimento la larghezza della pagina tenendo presente anche la scrollbar laterale.
Cosa succede quindi: la pagina che ho di fronte non ha scrollbar, all'inserimento delle prime lettere mi appare il suggerimento, ma viene spostato un pelo a sinistra.
Questo perchè questo sistema tiene in considerazione l'altezza della pagina come se il nodo creato fosse in fondo, e quindi andando oltre la risoluzione dello schermo, tenendo in considerazione la presenza dello scrollbar.

Non so se mi sono ben spiegato.
Vi prego, se qualcuno ha capito anche solo un 10% di quello che voglio dire risponda che cercherò di essere più chiaro... grazie.

[bANART]

Posto un'immagine per cercare di spiegarmi meglio



la posizione della tendina viene calcolata tenendo presente la larghezza della pagina come se fosse presente la scollbar.
Questo perchè (credo) il nodo con i suggerimenti, prima di essere riposizionato sotto il campo input, viene creato in fondo alla pagina.

Se non venisse riposizionato il nodo la pagina apparirebbe con lo scroll poichè il suggerimento si troverebbe in fondo alla pagina.

Sapreste come posso risolvere questo problema?
Grazie 1000

[Xinod]

lascia un link alla tua pagina

e' vero che il livello viene appeso alla fine del body ma e' anche implicito che si trovi posizionato assolutamente, quindi, se gia' non avviene, via css si puo' spostare in alto fuori viewport ed evitare che allunghi la pagina

capisci che con queste variabili in gioco non basta vedere lo script

[bANART]

Hai ragione... il link è questo:
http://www.pixter.it/magazzino/spost/

Prova a ridimensionare l'altezza della finestra del browser fino al limite di quando appare la scrollbar, senza farla apparire.
Ho fatto un elenco in questo modo:
a1
b1 b2
c1 c2 c3
...
l1 l2 3l 4l 5l 6l 7l 8l 9l l10
questo in modo tale che se digito "e" so che avrò una tendina con 5 campi.

Fai caso anche ad un'altra cosa, se ti posizioni sul campo e digiti "L" l'elenco di suggerimenti ti appare spostato (il famoso errore), se cancelli e riscrivi "L" l'elenco appare nella posizione corretta.

Se serve altro sono quì! Non riesco ad arrivare a capo...

[Xinod]

appunto, viene appeso al body, ma e' gia' in posizionamento assoluto,
quindi ti basta specificare un top e left nella regola css per evitare che l' elemento stesso "allunghi" la pagina

div.suggestions {
	-moz-box-sizing: border-box;
	/*box-sizing: border-box;*/
	border: 1px solid #999;
	position: absolute;
	width: 254px;
	top:0px;
	left:-999em;
	}

nota che cosi' risolvi il problema nell' immediato (la prima volta che viene mostrato si trova a coordinate errate) ma rimane un problema a monte:
se, con il livello dei suggerimenti aperto, ridimensioni la viewport in orizzontale ti accorgi che il pannello resta dove si trova mentre il resto si centra

per fare in modo che il pannello segua il relativo campo il primo non va appeso al body, ma quanto meno ad un contenitore comune ai campi (probabilmente homeSearch, avendo cura di posizionare questo elemento in maniera relativa) e andare a rilevare le coordinate del campo non fino al body ma fino a homeSearch...

ciao

[bANART]

Wow Xinod!!!
Ma sai che, sapendo di js poco e niente, avevo pensato alla soluzione che mi descrivi... appendere il div dei suggerimenti a qualcosa che non sia il body.
..ma (come dicevo sapendo poco e niente di js) ho provato a cambiare la parola "body" alla stringa document.body.appendChild(this.layer); non sortendo i risultati sperati.

Come faccio ad appendere il box ad un div con riferimento di classe o id?

Intanto ti ringrazio moltissimo, già così non è male... un utente in fase di inserimento non credo vada a ridimensionare la pagina, però se "perfetto" è meglio

[Xinod]

diventa
document.getElementById('homeSearch').appendChild( this.layer);

poi cambia
while(oNode.tagName != "BODY") {
in
while(oNode.id && oNode.id!='homeSearch') {
sia in AutoSuggestControl.prototype.getLeft che in AutoSuggestControl.prototype.getTop

e setta nel css homeSearch a position:relative

ciao

[bANART]

wow... fantastico!!

Non so come ringraziarti.

[bANART]

Caspita!! Problema!!!
Il suggerimento del sistema operativo..

Come faccio a disabilitare il suggerimento "automatico"? (vedi immagine)

[Xinod]

<input type="text" autocomplete="off" />