Visualizzazione dei risultati da 1 a 7 su 7

Discussione: Suggest Again!

  1. #1

    Suggest Again!

    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!

  2. #2
    Hai accorpato due script fatti in contesti diversi insieme...

    Ci sto lavorando alla possibilità di fare uscire una tendina tipo Google Suggest, ma per il momento non sono riuscito a fare ancora nulla di stabile...

    Se vuoi attendere... altrimenti passo parola!
    [ DarCas The Architect ]
    [ The DarCas Of Blog ]
    Chuck Norris riesce a trovare un pagliaio dentro a un ago
    :maLOL:

  3. #3
    E' già..

    Il problema del fatto che i valori non vengono visualizzati tutti penso che sia facile da risolvere solo che non conosco bene javascript per farlo..

    In pratica bisogna registrare in un var "wrote" i caratteri che vengono inseriti man a mano e poi quando nella funzione FindItem()

    if ((Items[i].toLowerCase()).indexOf(value.toLowerCase())==0) {

    il match deve essere fatto non con il contenuto del Textbox ma con la var "wrote" scritta fino a quel momento..

    Infatti se io scrivo "C" appare campo1 e la funz FindItem mi mostra solo il valore corrispondente a Campo1 invece mi deve mostrare Campo1,Campo2,Campo3,Campo4!

    Vai DarCas illuminaci!!

  4. #4
    up! mi sembra una cosa interessante..

  5. #5
    Originariamente inviato da DarCas
    Hai accorpato due script fatti in contesti diversi insieme...

    Ci sto lavorando alla possibilità di fare uscire una tendina tipo Google Suggest, ma per il momento non sono riuscito a fare ancora nulla di stabile...

    Se vuoi attendere... altrimenti passo parola!
    Ciao Darcas, come procede il lavoro?

    Non mi dire che hai "ammucchiato"!

    Bye>

  6. #6
    Originariamente inviato da Satoshy
    Ciao Darcas, come procede il lavoro?

    Non mi dire che hai "ammucchiato"!

    Bye>
    Non ho ammucchiato,
    ma sto lavorando ad un altra cosa ora, quindi per il momento non spazio per terminare il Suggest.

    E tu, non hai provato a finirlo?
    Se cerchi, c'è già qualcuno che l'ha fatto: basta aggregare i due script insieme.

    Provaci anche tu, magari lo finisci prima di me, e poi sarò io a chiedere a te!
    [ DarCas The Architect ]
    [ The DarCas Of Blog ]
    Chuck Norris riesce a trovare un pagliaio dentro a un ago
    :maLOL:

  7. #7
    Io lo finirei volentieri solo che non conosco bene javascript.. ho già prearato tutto il lato server ad hoc ma per quanto riguarda il javascript non riesco..

    C'è qualcuno che ha già fuso i due script e mi sà dire di +?

    Tnx

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.