Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    2

    Come inserire link ad ogni elemento di un array (che reindirizza ad una parte di un'altra pagina)

    Salve, mi scuso in precedenza per la mia ignoranza ma sono alle prime armi con questo linguaggio e cercando su questo e in altri forum non ho risolto il mio dubbio, anzi se possibile sono ancora più in confusione.
    Il dubbio riguarda la barra di ricerca con autocompletamento per il mio sito.

    Creato un array con gli elementi che corrispondono ai possibili risultati della ricerca, vorrei aggiungere un link ad ogni elemento del vettore che rimanda ad una specifica parte (nel mio caso un accordion) di un'altra pagina, che viene raggiunta al click di quell'elemento o al click del tasto submit.
    Es: Digitando "I" e cliccando sul risultato suggerito "Inghilterra" vorrei andare a finire nella porzione di un'altra pagina (dello stesso sito) che tratta l'Inghilterra.

    codice:
    <form autocomplete="off" action="">
    <div class="autocomplete" style="">
    <input id="myInput" type="text" name="Ilmiostato" placeholder="Digita uno stato">
    </div>
    <input type="submit">
    </form>
    
    
    <script>
    function autocomplete(inp, arr) {
    var currentFocus;
    inp.addEventListener("input", function(e) {
    var a, b, i, val = this.value;
    closeAllLists();
    if (!val) { return false;}
    currentFocus = -1;
    a = document.createElement("DIV");
    a.setAttribute("id", this.id + "autocomplete-list");
    a.setAttribute("class", "autocomplete-items");
    this.parentNode.appendChild(a);
    for (i = 0; i < arr.length; i++) {
    if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
    b = document.createElement("DIV");
    b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
    b.innerHTML += arr[i].substr(val.length);
    b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
    b.addEventListener("click", function(e) {
    inp.value = this.getElementsByTagName("input")[0].value;
    closeAllLists();
    });
    a.appendChild(b);
    }
    }
    });
    inp.addEventListener("keydown", function(e) {
    var x = document.getElementById(this.id + "autocomplete-list");
    if (x) x = x.getElementsByTagName("div");
    if (e.keyCode == 40) {
    currentFocus++;
    addActive(x);
    } else if (e.keyCode == 38) { 
    currentFocus--;
    addActive(x);
    } else if (e.keyCode == 13) {
    e.preventDefault();
    if (currentFocus > -1) {
    if (x) x[currentFocus].click();
    }
    }
    });
    function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocomplete-active");
    }
    function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
    x[i].classList.remove("autocomplete-active");
    }
    }
    function closeAllLists(elmnt) {
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
    if (elmnt != x[i] && elmnt != inp) {
    x[i].parentNode.removeChild(x[i]);
    }
    }
    }
    
    
    document.addEventListener("click", function (e) { closeAllLists(e.target);
    });
    }
    
    
    var countries = ["Inghilterra", "Spagna", "Italia", "Grecia", "Germania", "Svizzera", "Irlanda"];
    
    
    autocomplete(document.getElementById("myInput"), countries);
    
    
    </script>
    Scusandomi ancora per l'ignoranza e per l'eventualità che la questione sia già stata affrontata, ringrazio molto per l'eventuale disponibilità e porgo cordiali saluti.

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,731
    Salve, mi scuso in precedenza per la mia ignoranza
    Ciao e benvenuto su questo forum.
    Figurati, non c'è nulla di cui scusarsi, anche per il fatto che hai correttamente fatto le tue ricerche prima di postare

    elemento del vettore che rimanda ad una specifica parte (nel mio caso un accordion) di un'altra pagina
    Bisogna capire che sistema è utilizzato per aprire l'accordion di tale pagina; non lo hai indicato. Suppongo, ma senza alcuna certezza, possa essere sfruttato l'hashtag da specificare nell'indirizzo URL, in modo da "aprire" la pagina sull'ancora specificata da tale valore.

    Se poi viene usato un diverso sistema è necessario che tu fornisca gli opportuni dettagli.

    Ad ogni modo dovrai modificare lo script aggiungendo un relativo link per ogni voce creata dall'autocomplete.

    Prova a sostituire questa parte di script:
    codice:
    b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
    b.innerHTML += arr[i].substr(val.length);
    b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
    con una cosa del genere:
    codice:
    b.innerHTML = "<a href='tuapagina#" + arr[i] + "' >"
                + "<strong>" + arr[i].substr(0, val.length) + "</strong>"
                + arr[i].substr(val.length)
                + "</a>"
                + "<input type='hidden' value='" + arr[i] + "'>";
    Sostanzialmente, per ogni voce, sarà creato un link che punta a "tuapagina#valore_hashtag"

    Ovviamente sostituisci tuapagina con l'URL della pagina a cui vuoi puntare.

    Per il submit non mi è chiaro come vuoi che funzioni, perché può apparire più di una voce (e quindi di un link), per cui il submit a quale indirizzo dovrebbe puntare?

    Attualmente il submit punta alla pagina specificata dall'attributo action del form, passando in GET il parametro Ilmiostato col valore corrente di quel campo input. Chiaramente questo valore potrebbe essere anche non completo (rispetto alle voci definite per l'autocomplete) nel momento in cui avviene il submit. Per cui bisogna capire come intendi far funzionare questa parte e se ti serve realmente avere quel submit, dal momento che stai creando un sistema con i link.

    Fai sapere, buon proseguimento
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    2
    Scusandomi del ritardo, ci tenevo a porgere i miei ringraziamenti per l'utile ed esaustiva risposta.
    Cordiali saluti e grazie ancora!

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,731
    Nessun problema, spero tu abbia risolto. Mi fa comunque piacere essere stato d'aiuto.
    Buon proseguimento
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

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 © 2020 vBulletin Solutions, Inc. All rights reserved.