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

【问题标题】：Assigning anchor tag on search bar results在搜索栏结果上分配锚标记
【发布时间】：2021-04-08 14:39:30
【问题描述】：

所以，我有这个简单的搜索栏，问题是我需要在每个对象的名称值上都有一个锚标记来链接他们的个人资料页面。我怎样才能做到这一点？我试着用 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>

或者，我可以在“a”标签中链接本地文件吗？

【问题讨论】：

您要链接到的通用 URL 模式是什么？只需创建一个锚元素并将其附加到item，而不是附加一个文本节点。
@Terry 实际上，我需要为每个选项链接自己的本地文件。但如果不可能，我会使用 github 上传这些文件，然后我会从那里获取它们的 URL

标签： javascript html user-interface input uisearchbar

【解决方案1】：

如果我正确理解了您的问题，您不确定如何创建锚点 <a> 并将其附加到结果中，对吧？只需将const text = document.createTextNode(person.name); 替换为document.createElement('a')，然后将其innerText 设置为person.name 并将其href 属性设置为您知道的某个URL。

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>

【讨论】：