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!