there is a list and input form (code attached below):

function someFunc() { var noh = document.getElementById("search").value; spsk = document.getElementById(listr); spsk.style.display = 'none' } document.getElementById("btn").onclick = someFunc; 
 .list li:nth-child { display: none; } input[type=button] { width: 120px; height: 25px; } 
 <input type="text" class="srch" id="search" onchange=""> <input type="button" id="btn" value="сортировать"> <ol class="list" id="listr"> <li>Саратов</li> <li>Новгород</li> <li>Москва</li> <li>Санкт-Петербург</li> </ol>

The task is as follows: There is a list in HTML, any tagged or ordered, when you enter a character (or part of a keyword), you must remove parts of the list that do not belong to them, that is, if you have a list attached in the code, write "m" in the input line , then only Moscow will remain, and all other parts of the list should be deleted, and if the entry line is cleared, the list will return to its original position.

The questions are as follows: 1. How to handle the input line and what can help with this? That is, if I enter and part of the list is deleted in my real-time mode, it means my value must be temporarily stored somewhere (I tried to store it, as seen by the JS code), and then somehow interact with the list, if so, how can I remove part of the list when I enter a certain character (what is it implemented and in what specific way)? If the value entered into the string does not need to be saved, how else can you implement the action “to do when changing?

I ask for help in solving this problem, because the Internet does not give clear answers, but it is argued that this is a "10-30 minutes" task, to which I have already killed more than two hours. Thank you in advance.

  • one
    document.getElementById(listr) - Here you have a typo - Stepan Kasyanenko
  • Google the <datalist> HTML element in any modern online directory. - Inquisitor

1 answer 1

Hope what you need.

 document.querySelector("input[type=\"text\"]").addEventListener("input", (e) => { [...document.querySelectorAll("ul li")].forEach(item => { if (item.textContent.toLowerCase().includes(e.target.value.toLowerCase())) { item.style.display = "block"; } else { item.style.display = "none"; } }); }); 
 <input type="text"> <ul> <li>Москва</li> <li>Санкт-Петербург</li> <li>Киев</li> <li>Волгоград</li> <li>Челябинск</li> <li>Чебоксары</li> </ul>

  • Exactly what is needed, but there are a number of questions, could you explain in more detail what exactly happens in the functions described by you in javascript? What is item.textContent.toLowerCase (). Includes (e.targer.value.toLowerCase ()))? What does the symbol => and the square bracket [...? - Roman Dolgikh
  • item.textContent - we take the text from <li> , toLowerCase() - we translate everything into lowercase *строка1*.includes(*строка2*) - check whether the substring of string2 is in string string1 , about => read here , [...] - just chose all elements li without writing to a variable (roughly speaking, look on the Internet), if there are difficulties - write, I will find time to contact you. - meine