I am trying to create search system from this video: https://www.youtube.com/watch?v=SWkPXbQXArk
I did everything and it works a bit, only problem is its not creating li element. it just puts text in ul. so whats the problem? please help. and if anyone knows how can i make this li elements clickable to navigate user on custom page?
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(text);
}
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(text);
}
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();
}
});
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<span class="fa fa-search"></span>
</span>
</div>
<input autofocus placeholder="თამაშების ძიება..." class="form-control" type="text" autocomplete="off" name="search" id="search">
</div>
<ul class="list-group" id="list">
</ul>
Aucun commentaire:
Enregistrer un commentaire