vendredi 18 septembre 2020

javascript not creating li element in html [closed]

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