Assigning anchor tag on search bar results

Question

So, I have this simple search bar and problem is that I need an anchor tag on every object's name value to link their profile pages. How can I do that? I tried to do it with appendChild() but still can't reach it.

// JavaScript
 const users = [
  {name: "fabien potencier"},
  {name: "andrew nebitt"},
  {name: "taylor otwell"},
  {name: "egoist"},
  {name: "hugo giraudel"},
  {name: "thibault duplessis"},
  {name: "juho vepsalainen"},
  {name: "nelson"},
  {name: "alex crichton"},
  {name: "jongleberry"}
];

const searchInput = document.getElementById("searchBox");
const list = document.getElementById("list");

function setList(group){
  clearList();
  for(let person of group){
    let item = document.createElement("li");
    item.style.color = "white";
    const text = document.createTextNode(person.name);
    item.appendChild(text);
    list.appendChild(item);
  }
  if(group.length === 0){
    noResults(); 
  }
}

function clearList(){
  while(list.firstChild) {
    list.removeChild(list.firstChild);
  }
}

function noResults(){
  const item = document.createElement("li");
  const text = document.createTextNode("No results found");
  item.appendChild(text);
  list.appendChild(item);
}

searchInput.addEventListener("input", (event) => {
  let value = event.target.value;
  if(value && value.length > 0) {
    value = value.trim();
    setList(users.filter(person => {
      return person.name.includes(value);
    }));
  }else {
    clearList();
  }
});

or, can I link local files in the "a" tag?

user_395910 · Answer

If I understood your question correctly, you aren't sure about how to create and append an anchor element to your results, right? It is simply a matter of swapping out const text = document.createTextNode(person.name); and replacing it with document.createElement('a') and then setting its innerText to person.name and its href attribute to some URL that you know.

p/s: Since you're calling clearList() whether your value is non-zero or not, you don't have to call it in multiple parts of the code but simply in the input event handler directly

// JavaScript
 const users = [
  {name: "fabien potencier"},
  {name: "andrew nebitt"},
  {name: "taylor otwell"},
  {name: "egoist"},
  {name: "hugo giraudel"},
  {name: "thibault duplessis"},
  {name: "juho vepsalainen"},
  {name: "nelson"},
  {name: "alex crichton"},
  {name: "jongleberry"}
];

const searchInput = document.getElementById("searchBox");
const list = document.getElementById("list");

function setList(group){
  for(let person of group){
    const item = document.createElement("li");
    const link = document.createElement("a");
    link.innerText = person.name;
    link.href = '/url/to/profile';

    item.appendChild(link);
    list.appendChild(item);
  }
  if(group.length === 0){
    noResults(); 
  }
}

function clearList(){
  while(list.firstChild) {
    list.removeChild(list.firstChild);
  }
}

function noResults(){
  const item = document.createElement("li");
  const text = document.createTextNode("No results found");
  item.appendChild(text);
  list.appendChild(item);
}

searchInput.addEventListener("input", (event) => {
  let value = event.target.value;
  clearList();
  
  if(value && value.length > 0) {
    value = value.trim();
    setList(users.filter(person => {
      return person.name.includes(value);
    }));
  }
});

Assigning anchor tag on search bar results

1 Answers