How can i make words in my javascript array into a link

Question

I have a searchbar that autofills the words, i want to make the autofilled words links. so i have a page called page2.html and i want it so that if i type locations it will autofill the word locations en when i click on the autofilled word it will direct me to my Page2.html.

If i go to my searchbar and type Locations i get nothing, if i type "<" i get the code. it doesnt make it a link.

This is my html/javascript, there is a code that targets the arry down at the bottom:

  <form autocomplete="off" action="/action_page.php">
      <div class="SearchBar">
        <input id="myInput" type="text" name="Search2" placeholder="Search...">
      </div>
    </form>

    <script>

 var SW = ["<a href='Page2.html'>Locations</a>"];

    function SearchBar(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 + "SearchBar-list");
     a.setAttribute("class", "SearchBar-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 + "SearchBar-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("SearchBar-active");
 }
 function removeActive(x) {

   for (var i = 0; i < x.length; i++) {
     x[i].classList.remove("SearchBar-active");
   }
 }
 function closeAllLists(elmnt) {

   var x = document.getElementsByClassName("SearchBar-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);
 });
 }
    </script>

    <script>
 SearchBar(document.getElementById("myInput"), SW);
 </script>

ShadowLp174 · Accepted Answer · 2021-12-17 22:04:58Z

1

You can create the suggestion items using document.createElement.
Like this:

var SW = ["Locations", "test"];
var links = ["https://shadowlp174.4lima.de","https://stackoverflow.com"];

function SearchBar(inp, arr, links) {
  var currentFocus;
  inp.addEventListener("input", function(e) {
    var div, b, i, val = this.value;

    closeAllLists();
    if (!val) {
      return false;
    }
    currentFocus = -1;

    div = document.createElement("div");
    div.id = this.id + "SearchBar-list";
    div.classList.add("SearchBar-items");
    this.parentNode.appendChild(div);

    for (i = 0; i < arr.length; i++) {
      if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
        var a = document.createElement("a");
        a.href = links[i];
        a.setAttribute("suggestion", arr[i]);
        div.appendChild(a);

        let strong = document.createElement("strong");
        strong.innerHTML = arr[i].substr(0, val.length);
        let span = document.createElement("span");
        span.innerHTML = arr[i].substr(val.length, arr[i].length - 1);
        a.appendChild(strong);
        a.appendChild(span);

        a.addEventListener("click", function(e) {
          inp.value = this.getAttribute("suggestion");
          closeAllLists();
        });
      }
    }
  });

  inp.addEventListener("keydown", function(e) {
    var x = document.getElementById(this.id + "SearchBar-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("SearchBar-active");
  }

  function removeActive(x) {

    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("SearchBar-active");
    }
  }

  function closeAllLists(elmnt) {

    var x = document.getElementsByClassName("SearchBar-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);
  });
}
SearchBar(document.getElementById("myInput"), SW, links);

<form autocomplete="off" action="/action_page.php">
  <div class="SearchBar">
    <input id="myInput" type="text" name="Search2" placeholder="Search...">
  </div>
</form>

You can set the destinations in the array. I set it to two demo sites which are available to everyone.

edited Dec 17, 2021 at 22:04

answered Dec 17, 2021 at 13:26

ShadowLp174

5322 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Thomas Over a year ago

Thanks al lot, but csn you give me the whole code please. i am just getting started with coding and a friend helped me with this. Thank you so much :0

ShadowLp174 Over a year ago

oh of course just a sec...

ShadowLp174 Over a year ago

@Thomas I added a working snippet... I added my solution and changed some things... like you don't need to use 'setAttribute' for standard attributes like id or so. This can be used for custom attributes. Let me know if you need something else ;)

Thomas Over a year ago

I had to rename some divs and edit the css and now its looking good and most importantly, its working too! TYSM

ShadowLp174 Over a year ago

I’ll edit the answer so you have a working example @Thomas

|

Collectives™ on Stack Overflow

How can i make words in my javascript array into a link

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related