Ehi ragazzi, vi avviso che il select e' finito.
Questa versione e' quella base, quindi diciamo che al momento riprende le funzioni generali di un semplice select con le funzioni aggiuntive di completamento automatico.
Il lavoro non e' ancora del tutto finito, ma per chi ha voglia di sperimentarlo e dirmi la sua opinione lo puo' fare copiando il codice html sottostante ed incollarlo su una classica pagina html.
I css sono stati inseriti all'interno della pagina per semplificare la lettura del codice e darvi un esempio pratico con la semplice copia dell'html.
Eccovi il codice html.
codice:
<script language="javascript" type="text/javascript">
// Array che popola il Select.
var Items = new Array("campo1","campo2","campo3","campo4","domodossola","domenica","Danimarca","lama","lettiera","muschio","mucca","mangime","testo1","testosterone");
var timeofkeypressdown=0; // Questa variabile registra quante volte e' stato premuto il tasto GIU' da tastiera e mi consente di cambiare stile nel tag TD
var pointer;
/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// QUESTA FUNZIONE NON E' ANCORA STATA COMPLETATA //
// Essa avra' ha il compito di controllare tutti i vari aspetti del select quali la //
// selezione degli elementi in base alla pressione dei tasti SU e GIU', la chiusura del //
// select al cliccare del mouse fuori dall'area, la conferma della scelta alla pressione //
// del tasto Invio etc... //
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
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)){ // Sto' premendo il tasto GIU' da tastiera
if (refrow == undefined) {
return;
}else {
newHTML="\t\t<td id="+(i+timeofkeypressdown)+" class=\"IN\" onClick=\"Selected("+(i+timeofkeypressdown)+");\">"+Items[(i+timeofkeypressdown)]+"</td>\n";
pointer=Items[(i-1)+timeofkeypressdown];
}
refrow.innerHTML=newHTML;
key=0;
timeofkeypressdown+=1;
}else if ((key==38)&&((Items[i].toLowerCase()).indexOf(keypressed.toLowerCase())==0)) { // Sto' premendo il tasto SU da tastiera
//alert("pointer="+pointer+"\nItems="+Items[i]);
if (pointer==Items[i]) {
timeofkeypressdown-=1;
newHTML="\t\t<td id="+i+" class=\"IN\" onClick=\"Selected("+i+");\">"+Items[i]+"</td>\n";
document.getElementById('photolibrarylist').rows[timeofkeypressdown-1].innerHTML=newHTML;
// timeofkeypressdown-=1;
key=0;
}
}else if (key==13) {
//alert(document.getElementById('photolibrarylist').rows[timeofkeypressdown-2].innerHTML);
if (document.getElementById('photolibrarylist').rows[timeofkeypressdown-2].innerHTML==Items[i]) {
alert(Items[i]);
document.formcompanies.companies.value=Items[i];
document.getElementById("listcompanies").style.display="none";
}
}
}
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
function Selected(cellid) {
timeofkeypressdown=0;
for (var i=0; i<Items.length; i++) {
if (cellid==i) {
document.formcompanies.companies.value=Items[i];
document.getElementById("listcompanies").style.display="none";
}
}
}
function ShowItem() {
if (document.getElementById("listcompanies").style.display=="none")
document.getElementById("listcompanies").style.display="block";
else
document.getElementById("listcompanies").style.display="none";
}
function FindItem(value,evt) {
var event=evt;
var ref=document.getElementById('listcompanies');
var innerHTML="";
innerHTML="<table id=\"photolibrarylist\" class=\"photolibrarylist\" cellpadding=\"0\" cellspacing=\"0\">\n\t<tbody>\n";
for (var i=0; i<Items.length; i++) {
if ((Items[i].toLowerCase()).indexOf(value.toLowerCase())==0) {
innerHTML=innerHTML+"\t\t<tr><td id="+i+" class=\"OUT\" onmouseover=\"this.className=\'IN\';\" onmouseout=\"this.className=\'OUT\';\" onClick=\"Selected("+i+");\">"+Items[i]+"</td></tr>\n";
//alert(ref);
}
}
innerHTML+="\t</tbody>\n</table>\n";
ref.innerHTML=innerHTML;
//Arrowmovement(event,value);
document.getElementById("listcompanies").style.display="block";
}
</script>
<html>
<head>
<STYLE type="text/css">
table.photolibrarylist { width:100%; padding-left:0px }
table.photolibrarylist td.IN { background-color:#316ac5; cursor:default; color:white }
table.photolibrarylist td.OUT{ background-color:transparent; color:black }
div.imageselect { position:relative; margin-left:183px; margin-top:-21px }
div.lcompanies { background-color:white; border:1px solid black; padding-left:2px; width:200px; height:150px; margin-top:2px; margin-left:15px; overflow:auto;display:none }
</style>
</head>
<body>
<div style="position:absolute; margin-top:46px">
<form name="formcompanies" method="post">
<div style="position:relative; padding-left:15px">
<input type="text" name="companies" style="width:200px" value="all companies" onclick="if(this.value=='all companies') this.value='';" onkeyup="FindItem(this.value,event);">
<div class="imageselect">[img]arrow_select.jpg[/img]</div>
</div>
<div id="listcompanies" class="lcompanies">
<table id="photolibrarylist" class="photolibrarylist" cellpadding="0" cellspacing="0">
<!--
La parte di codice scritta sotto, era stata originariamente scritta in php per il completamento dei contenuti, ma l'ho modificata in codice HTML
per rendere piu' semplice la comprensione dello stesso e per potervi dare un esempio pratico con un semplice copia ed incolla dell'interno HTML
-->
<tr><td id=0 class="OUT" onmouseover="this.className='IN';" onmouseout="this.className='OUT';" onClick="Selected(0);">campo1</td></tr>
<tr><td id=1 class="OUT" onmouseover="this.className='IN';" onmouseout="this.className='OUT';" onClick="Selected(1);">campo2</td></tr>
<tr><td id=2 class="OUT" onmouseover="this.className='IN';" onmouseout="this.className='OUT';" onClick="Selected(2);">campo3</td></tr>
<tr><td id=3 class="OUT" onmouseover="this.className='IN';" onmouseout="this.className='OUT';" onClick="Selected(3);">campo4</td></tr>
<tr><td id=4 class="OUT" onmouseover="this.className='IN';" onmouseout="this.className='OUT';" onClick="Selected(4);">domodossola</td></tr>
<tr><td id=5 class="OUT" onmouseover="this.className='IN';" onmouseout="this.className='OUT';" onClick="Selected(5);">domenica</td></tr>
<tr><td id=6 class="OUT" onmouseover="this.className='IN';" onmouseout="this.className='OUT';" onClick="Selected(6);">Danimarca</td></tr>
<tr><td id=7 class="OUT" onmouseover="this.className='IN';" onmouseout="this.className='OUT';" onClick="Selected(7);">lama</td></tr>
<tr><td id=8 class="OUT" onmouseover="this.className='IN';" onmouseout="this.className='OUT';" onClick="Selected(8);">lettiera</td></tr>
<tr><td id=9 class="OUT" onmouseover="this.className='IN';" onmouseout="this.className='OUT';" onClick="Selected(9);">muschio</td></tr>
<tr><td id=10 class="OUT" onmouseover="this.className='IN';" onmouseout="this.className='OUT';" onClick="Selected(10);">mucca</td></tr>
<tr><td id=11 class="OUT" onmouseover="this.className='IN';" onmouseout="this.className='OUT';" onClick="Selected(11);">mangime</td></tr>
<tr><td id=12 class="OUT" onmouseover="this.className='IN';" onmouseout="this.className='OUT';" onClick="Selected(12);">testo1</td></tr>
<tr><td id=13 class="OUT" onmouseover="this.className='IN';" onmouseout="this.className='OUT';" onClick="Selected(13);">testosterone</td></tr>
<!--
Qui' di seguito invece vi inserisco il ciclo in php che permette di inserire i contenuti dell'array all'interno del select
<?
for($i=0;$i<count($array_contenente_i_campi);$i++){
print "<tr><td id={$i} class=\"OUT\" onmouseover=\"this.className='IN';\" onmouseout=\"this.className='OUT';\" onClick=\"Selected({$i});\">\n";
print "{$array_contenente_i_campi[$i]["Nome_campo"]}\n";
print "</td></tr>\n";
}
?>
-->
</table>
</div>
</form>
</div>
</body>
</html>
Consigli ed opinioni sono bene accette.
ciao
Rispondi quotando
Come ho scritto, nel web mi è capitato di vedere qualcosa del genere...A ricordarsi dove...
