Select Digitabile

[alexdem24]

a dirti il vero ho quasi finito anche quella funzione..
la sto' testando con entrambi i browser Internet Explorer e Firefox.

Tra una decina di minuti ti posto la funzione per l'abilitazione dei tasti su e giu' + il tasto di invio per la conferma della scelta.

Cmq se vuoi adrgli un'occhiata anche te, la funzione che abilita i tasti si chiama "Arrowmovement(evento,tasto_premuto)".

Se nel tuo codice abiliti questa funzione, (che viene chiamata dall'interno della funzione "FindItem()") abiliti i controlli per i tasti.

ciao a presto.

[alexdem24]

ed eccoti la funzione che attiva gli eventi dei tasti pronta.

Ci sono ancora una paio di cose che non sono proprio uguali ad un select, ma piu' di tanto non e' possibile spingersi per problemi di compatibilita' e limitazioni di browser.

function Arrowmovement(evt,keypressed) {
	var refrow;
	var newHTML;
	var key = (evt.which) ? evt.which : event.keyCode;
	refrow=document.getElementById('photolibrarylist').rows[timeofkeypressdown];
	 for (var i=0; i<Items.length; i++) {
		 if ((key==40)&&((Items[i].toLowerCase()).indexOf(keypressed.toLowerCase())==0)) {   // I am pressing the DOWN button.
			if (refrow == undefined) {
				var last=timeofkeypressdown;
				document.getElementById('photolibrarylist').rows[last-1].cells[0].className='IN';
				return;
			} else  {
				pointer=Items[(i-1)+timeofkeypressdown];
			}
			if(refrow.cells[0]) refrow.cells[0].className="IN";
			if(timeofkeypressdown>0){
				document.getElementById('photolibrarylist').rows[timeofkeypressdown-1].cells[0].className='OUT';
			}					
			key=0;
			timeofkeypressdown++;
	 	}else if ((key==38)&&((Items[i].toLowerCase()).indexOf(keypressed.toLowerCase())==0)) {		// I am pressing the UP button.
	 		if (pointer==Items[i]) {
		 		timeofkeypressdown--;
				if(document.getElementById('photolibrarylist').rows[timeofkeypressdown-1]){
					document.getElementById('photolibrarylist').rows[timeofkeypressdown-1].cells[0].className='IN';
					if(refrow.cells[0]) refrow.cells[0].className='OUT';
				}
				else {
					document.getElementById('photolibrarylist').rows[timeofkeypressdown].cells[0].className='IN';
					timeofkeypressdown++;
				}
		 		key=0;			 
	 		}
	 	}
	}
}

Sostituisci la funzione Arrowmovement postata in precedenza con questa qui'
Ciao a presto

[AgainC78]

Mo tu me dirai che so un rompiscatole...
Stò provando a gestire la pressione del tasto invio per selezionare una delle righe della tabella ma mi sono un'attimo perso nella tua logica perchè non riesco a mantenere l'indice della riga selezionata e quindi seleziono delle righe a vanvera.
Ma tu come hai fatto???

[alexdem24]

il tasto invio e' non l'ho finito di implementare.
Appena lo finisco ti posto il codice corretto.

ciao a presto

[AgainC78]

Scusa alex ho un proble...usando l'ogetto che mi hai passato in una form con più oggetti la lista delle options (la tabella nascosta) non mi và in sovrapposizione con delle select reali...per chiarezza allego una immagine, inizialmete ho provato a risolvere al cosa impostando gli z-index degli oggetti ma ho scoperto che invece è un bug conosciuto di explorer hai qualche idea di come risolverlo???

[alexdem24]

purtroppo per quel problema non c'e niente da fare. Gli elementi attivi del form saranno SEMPRE in primo piano rispetto agli altri. Anche se setti lo z-index il problema rimane. L'unica soluzione possibile e' che sposti il select digitabile in un luogo dove non viene toccato da nessun elemento.
Oppure potresti spostare gli elementi sottostanti un po piu' in basso, oppure ancora diminuire l'altezza del div dinamico in modo da far comparire la barra di scorrimento e non far sovrascrivere l'elemento del form.

[Peter_Pan]

complimeti bellissimo, volevo sapere a che punto eravate, e poi volevo dirvi che il tasto invio non mi funziona, avete fatto dei progressi??
Poi ho notato che se scendo con le frecce quando seleziono un elemento che sta al di sotto della grandezza del div, non mi scrolla, c'è rimedio??
CMQ avete fatto un lavoro favoloso.
Grazie

[bECH]

Veramente bello.

A me però non funzionano i tasti su e giù.

Dato che è da qualche mese che non ci sono aggiornamenti del thread volevo chidere anche se esiste qualche update (in particolare il tasto invio).

Grazie

[nereidahoxhaj]

Complimenti veramente... è fantastica!
Purtroppo i limiti ci sono e non possiamo farci niente ma
per farla assomigliare il + possibile a una select suggerirei di modificare la funzione ShowItem()
da:

function ShowItem() {
 if (document.getElementById("listcompanies").style.display=="none")
   document.getElementById("listcompanies").style.display="block";
 else
   document.getElementById("listcompanies").style.display="none";
}

a:

function ShowItem() {
 if (document.getElementById("listcompanies").style.display=="block")
     document.getElementById("listcompanies").style.display="none";
 else
     document.getElementById("listcompanies").style.display="block";
}

poiché la prima volta che clicco non si apre la lista invece usando una vera select si dovrebbe aprire.

La seconda modifica è quella di aggiungere onClick="ShowItem();" anche al <input type="text" name="companies" ... cosi anche se si clicca sull'input si apre al lista come in una select html.

[nereidahoxhaj]

Ah un altra cosa, ho seguito il consiglio di aggiungere position: absolute; z-index: 1; come suggerito in questa post...

Originariamente inviato da AgainC78
Perfetto funziona benissimo l'unica cosa che ho fatto è stato modificare lo stile della tabella che simula la lista delle option aggiungendo position: absolute; z-index: 1; per non farla apparire sovrapposta alla tabella generale senza modificarla.

... ma mi ha dato problemi con FF (mentre con IE funziona bene). Non ho capito bene xche ma non esce + lo scroll e gli elemeti della tabella escono fuori dal div.
Mi dispiace x chi ha la neccessità di avere la compatibilità anche con FF...

Ciaooooo