在搜索栏结果上分配锚标记

Question

所以，我有这个简单的搜索栏，问题是我需要在每个对象的名称值上有一个锚标记，以便 link 他们的个人资料页面。我怎样才能做到这一点？我尝试使用 appendChild() 来实现，但仍然无法实现。

// 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();
  }
});

<!-- HTML -->
<div class="header">
        <i class="fab fa-github github-icon"></i>
        <input autofocus type="text" id="searchBox" class="search-box" placeholder="Search For User" autocomplete="off" name="search"><i class="fas fa-search search-icon"></i>
    </div>
    <ul class="list-group" id="list" style="list-style-type: none;"></ul>

或者，我可以 link “a” 标签中的本地文件吗？

Answer 1

如果我对您的问题的理解正确，您不确定如何创建锚点 <a> 元素并将其附加到您的结果，对吗？这只是换出 const text = document.createTextNode(person.name); 并将其替换为 document.createElement('a') 然后将其 innerText 设置为 person.name 并将其 href 属性设置为某些 [=31] 的问题=] 你知道的。

p/s：因为你正在调用 clearList() 无论你的 value 是否为非零，你不必在代码的多个部分调用它但是只需直接在输入事件处理程序中

// 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);
    }));
  }
});

<div class="header">
  <i class="fab fa-github github-icon"></i>
  <input autofocus type="text" id="searchBox" class="search-box" placeholder="Search For User" autocomplete="off" name="search"><i class="fas fa-search search-icon"></i>
</div>
<ul class="list-group" id="list" style="list-style-type: none;"></ul>

在搜索栏结果上分配锚标记

Assigning anchor tag on search bar results

javascript

html

user-interface

input

uisearchbar