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

[WuTCC]

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.

<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.

[KillerWorm]

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:

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:

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

[WuTCC]

Scusandomi del ritardo, ci tenevo a porgere i miei ringraziamenti per l'utile ed esaustiva risposta.
Cordiali saluti e grazie ancora!

[KillerWorm]

Nessun problema, spero tu abbia risolto. Mi fa comunque piacere essere stato d'aiuto.
Buon proseguimento