Wyświetlanie wartości z tablic

Question

Cześć, mam problem, chcę zaadaptować pewną wyszukiwarkę pod swoją stronę, lecz nie wiem co zrobić, aby po wpisaniu hasła i usunięcia go nie wyświetlały się wszystkie wartości pod spodem, kombinowałem już z instrukcjami warunkowymi (coś na zasadzie

 if (input == null) {
    wrapper.removeChild(list);
    list = null; 
} 

) ale nie działało, poniżej cały kod (kod jest z tego poradnika na YT https://www.youtube.com/watch?v=9RfbZB9UVpM)

var wrapper = document.querySelector('.wyszukiwarka'),
    input = wrapper.querySelector('input'),
    list,
    predefinedValues;

predefinedValues = [
/*wartości*/ 
];

var createList = function (values) {
  if (list) {
    wrapper.removeChild(list);
  } 
  
 var ul = document.createElement('ul');
  
  values.forEach(function (value) {
  var li = document.createElement('li');  
    li.textContent = value;
    ul.appendChild(li);
  });
  
  return ul;
};

var manageList = function (string) {
  var showedValues = predefinedValues.filter(function (value) {
    return value.indexOf(string) == 0;
  });
  
  if (showedValues.length) {
    list = createList(showedValues);
    wrapper.appendChild(list);
  } else if (list != null) {
    wrapper.removeChild(list);
    list = null;
  }
};

var onType = function () {
  manageList(this.value);
};

input.addEventListener('keyup', onType);

 

Answer 1

Ciekawy przypadek, ponieważ String.prototype.indexOf() zwraca 0, gdy przekazany string jest pusty :)

Wystarczy zatem drobna modyfikacja warunku dla zwracania listy "rzeczy znalezionych" w pętli:

var showedValues = predefinedValues.filter(function (value) {
  return value.indexOf(string) == 0;
});

, zmodyfikuj linijkę z return na następującą:

return string && value.indexOf(string) == 0;

 

Comments

albo z użyciem po prostu metody badającej początek ciągu znakowego:

return string && value.startsWith(string)

 

---

Dzięki za pomoc, a i mam pytanie, czy te dwa znak "&&" są konieczne?

---

Jeśli wywołasz String.prototype.startsWith na nieistniejącej zmiennej to możesz dostać błąd ReferenceError więc bezpieczniej jest sprawdzić, chyba, że masz 100% pewność, że zawsze będzie string, ale to już sam musisz ocenić.

---

Okey, dzięki :D