Ciao a todos!
Stavo cercando nel forum e ho trovato un paio di interventi interessanti riguardo al codice Suggest nei textbox..
Sono riuscito dopo vari tentativi a ricreare una via di mezzo frà la funzione Suggest e la tendina sotto la textbox.
questo è quanto :
<html>
<head>
<title>Darcas Suggest Example</title>
<script type="text/javascript">
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 Items = new Array("campo1","campo2","campo3","campo4","domodos sola","domenica","Danimarca","lama","lettiera","mu schio","mucca","mangime","testo1","testosterone");
var isOpera = navigator.userAgent.indexOf("Opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;
function TextBoxSelect ( oTextbox, iStart, iEnd ) {
switch (arguments.length) {
case 1: oTextbox.select(); break;
case 2: iEnd = oTextbox.value.length;
case 3:
if (isIE) {
var oRange = oTextbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", -oTextbox.value.length + iEnd);
oRange.select();
} else if (isMoz) oTextbox.setSelectionRange(iStart, iEnd);
}
oTextbox.focus();
}
function TextBoxReplaceSelect ( oTextbox, sText ) {
if (isIE) {
var oRange = document.selection.createRange();
oRange.text = sText;
oRange.collapse(true);
oRange.select();
} else if (isMoz) {
var iStart = oTextbox.selectionStart;
oTextbox.value = oTextbox.value.substring(0, iStart) + sText + oTextbox.value.substring(oTextbox.selectionEnd, oTextbox.value.length);
oTextbox.setSelectionRange(iStart + sText.length, iStart + sText.length);
}
oTextbox.focus();
}
function SuggestFind ( sText ) {
for (var i=0; i < Items.length; i++) if (Items[i].indexOf(sText)==0) return Items[i];
return null;
}
function Suggest ( oTextbox, oEvent ) {
switch (oEvent.keyCode) {
case 8: // Backspace
case 9: // TAB
case 13: // Invio
case 16: // Shift
case 17: // CTRL
case 18: // ALT
case 20: // Caps Lock
case 27: // Esc
case 33: // Pagina Su
case 34: // Pagina Giù
case 35: // Fine
case 36: // Home
case 37: // Freccia Sinistra
case 38: // Freccia Su
case 39: // Freccia Destra
case 40: // Freccia Giù
case 46: return true; break; // Canc
default:
TextBoxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode));
var iLen = oTextbox.value.length;
var sMatch = SuggestFind(oTextbox.value);
if (sMatch != null) {
oTextbox.value = sMatch;
TextBoxSelect(oTextbox, iLen, oTextbox.value.length);
}
return false;
}
}
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').row s[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;
}
}
}
}
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";
}
}
innerHTML+="\t</tbody>\n</table>\n";
ref.innerHTML=innerHTML;
Arrowmovement(event,value);
document.getElementById("listcompanies").style.dis play="block";
}
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.dis play="none";
}
}
}
function ShowItem() {
if (document.getElementById("listcompanies").style.di splay=="none")
document.getElementById("listcompanies").style.dis play="block";
else
document.getElementById("listcompanies").style.dis play="none";
}
</script>
<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 }
input#txt1 { width: 200px }
</style>
</head>
<body>
<h2>Darcas Suggest Example</h2>
<div style="position:absolute; margin-top:46px">
<form name="formcompanies" method="post">
<div style="position:relative; padding-left:15px">
<input type="text" value="" id="txt1" name="companies" onKeyPress="return Suggest(this, event)" 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>
Ci sono due problemi che non sono riuscito a risolvere..
1. Quando scorri con i tasti giu/su dopo essere arrivato alla fine se risali ti ridà un errore (cells. è nullo o non è un oggetto)
2. unendo i codici che ho trovato non sono riuscito a fare in modo che se tu scrivi "c" ti restituisce solo Campo1 (ossia prende l'attuale valore sottolineato della textbox) invece dovrebbe apparirti tutta la lista Campo1,Campo2,Campo3,Campo4
Qualcuno ci sà aiutare?
TNX!
Rispondi quotando
