如何在 li 元素上添加带有 href 的元素？

Question

我的网站上有一个搜索系统，它可以工作，但我无法点击我搜索的项目。它是一个简单的脚本，可以创建依赖于我的搜索输入的 li 元素，但我如何才能将这些元素添加到自定义链接中？因为如果你不能点击你搜索的项目那没有任何意义......我想添加这个常量人物元素自定义链接。代码：

const people = [

{name:'გადაარჩინე დედამიწა'},

{name:'ანტიმელა'},

{name:'mr.capsule'},

{name:'capsule battle royale'}

];

const list = document.getElementById('list');

function setlist (group) {

    clearlist();

    for (const person of group) {

        const item = document.createElement("li");

        item.classList.add("list-group-item");

        const text = document.createTextNode(person.name);

        item.appendChild(text);

        list.appendChild(item);

    }

    if (group.length === 0) {

        setnoresults();

    }

}

function clearlist () {

while (list.firstChild) {

list.removeChild(list.firstChild);

}

}

function getrelevency (value, searchTerm) {

    if (value === searchTerm) {

        return 2;

    }else if (value.startsWith(searchTerm)) {

        return 1;

    }else if (value.includes(searchTerm)) {

        return 0;

    }

}

function setnoresults () {

const item = document.createElement('li');

        item.classList.add('list-group-item');

        const text = document.createTextNode('შედეგები ვერ მოიძებნა... სცადეთ თავიდან');

        item.appendChild(text);

        list.appendChild(item);

}

const searchInput = document.getElementById('search');

    searchInput.addEventListener('input', (event) => { 

        let value = event.target.value;

        if (value && value.trim().length > 0) {

            value = value.trim().toLowerCase();

            setlist(people.filter(person => {

                return person.name.includes(value);

            }).sort((personA, personB) => {

                return getrelevency(personB.name, value) - getrelevency(personA.name, value);

            }));

        }else {

            clearlist();

        }

    });

Answer 1

你应该在函数中添加它setlist。function setlist (group) {    clearlist();    for (const person of group) {        const item = document.createElement("li");        item.classList.add("list-group-item");        const link = document.createElement("a");        link.href = "http://..."; // put here where the link should point        item.appendChild(link);        const text = document.createTextNode(person.name);        link.appendChild(text);        list.appendChild(item);    }    if (group.length === 0) {        setnoresults();    }}

Answer 2

我通过这种方式获得了解决方案，检查搜索输入是什么，如果是目标搜索，它将在自定义搜索上添加一个链接。如果陈述者正在做一切！function setlist (group) {    clearlist();    for (const person of group) {        const item = document.createElement("li");        item.classList.add("list-group-item");        if (person.name === "გადაარჩინე დედამიწა") {          const link = document.createElement("a");        link.href = "https://google.com"; // put here where the link should point        link.text = "გადაარჩინე დედამიწა"        item.appendChild(link);    }        const text = document.createTextNode(person.name);        item.appendChild(text);        list.appendChild(item);    }    if (group.length === 0) {        setnoresults();    }}