There is a dropout, which contains points with the names of cities, as well as placeholder. The essence of the idea is that when you write the name of a city in placeholdere, for example, St. Petersburg, you need to remove all other points (with other cities weed out, and only Peter will remain. I will be grateful for the help!
- What is your understanding of "placeholder"? - MedvedevDev
- This is just the area where the person writes the text. - Daniil Lav
- @DaniilLav placeholder is where the hint goes that what the user should write in the field, and the user writes in the input - Nazar Kalytiuk
- Daniil Lav, placeholder - hint for the input field, what you describe is the input field (input, textarea), what you entered into it - the value (value) of the input field. - MedvedevDev
|
2 answers
You can do with simple HTML5: <input /> + <datalist> .
<label>Choose a browser from this list: <input list="browsers" name="myBrowser" /></label> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> <option value="Microsoft Edge"> </datalist> Source: https://developer.mozilla.org/ru/docs/Web/HTML/Element/datalist
|
Here is the easiest way to select input. It is not clear what your structure is "dropouts", so then you will have to do it yourself.
const inputCities = [ { name: "Piter" }, { name: "Moscow" }, { name: "Minsk" }, { name: "Paris" }, { name: "Monako" }, ] let cities = [] const input = document.querySelector('input'); input.oninput = () => { cities = inputCities; cities = cities.filter(c => c.name.startsWith(input.value)) console.log(cities) } <input/> - Stuck good based on the avarice of introductory. But I would rather advise to use ready-made libraries that are looking for not only exact matches from the beginning of the line, that is, also that St. Petersburg would find at the request of "pet" (or, God forbid, "Peter") - MedvedevDev
- Can you recommend such libraries please? I would be thankful. - Daniil Lav
|