Вывод списка городов при вводе в инпут

96
11 октября 2019, 09:50

Как реализовать такой вот функционал: при вводе в input названия города идет список городов подходящих под него?

Например:

Answer 1

Вот пример, только с именами. Для решения задачи достаточно:

function myFunction() { 
     
    let input = document.getElementById("myInput"); 
    let filter = input.value.toUpperCase(); 
    let ul = document.getElementById("myUL"); 
    let li = ul.getElementsByTagName("li"); 
    for (let i = 0; i < li.length; i++) { 
        let a = li[i].getElementsByTagName("a")[0]; 
        let txtValue = a.textContent || a.innerText; 
       
        if (txtValue.toUpperCase().includes(filter)) { 
            li[i].style.display = ""; 
        } else { 
            li[i].style.display = "none"; 
        } 
    } 
} 
//Tip: Remove toUpperCase() if you want to perform a case-sensitive search.
#myInput { 
    width: 95%; /* Full-width */ 
    font-size: 16px; /* Increase font-size */ 
    padding: 12px 20px 12px 40px; /* Add some padding */ 
    border: 1px solid #ddd; /* Add a grey border */ 
} 
#myUL { 
    /* Remove default list styling */ 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    width: 90%; 
} 
 
#myUL li a { 
    border: 1px solid #ddd; /* Add a border to all links */ 
    margin-top: -1px; /* Prevent double borders */ 
    background-color: #f6f6f6; /* Grey background color */ 
    padding: 12px; /* Add some padding */ 
    text-decoration: none; /* Remove default text underline */ 
    font-size: 18px; /* Increase the font-size */ 
    color: black; /* Add a black text color */ 
    display: block; /* Make it into a block element to fill the whole list */ 
} 
 
#myUL li a:hover:not(.header) { 
    background-color: #eee; /* Add a hover effect to all links, except for headers */ 
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> 
 
<ul id="myUL"> 
  <li><a href="#">Adele</a></li> 
  <li><a href="#">Agnes</a></li> 
 
  <li><a href="#">Billy</a></li> 
  <li><a href="#">Bob</a></li> 
 
  <li><a href="#">Calvin</a></li> 
  <li><a href="#">Christina</a></li> 
  <li><a href="#">Cindy</a></li> 
</ul>

Answer 2

Это можно сделать штатными средствами без скриптов

<input list="OWNER" value="" type="text" /> 
<datalist id="OWNER"> 
  <option>Москва 
  <option>Санкт - Петербург 
  <option>Иваново 
  <option>Ярославль 
</datalist>

READ ALSO
Laravel session id

Laravel session id

Всем приветКак получить данные сессии Laravel по её id? Метод хранение сессий в файле

128
На странице перед DOCTYPE не известный скрипт

На странице перед DOCTYPE не известный скрипт

На некоторых страницаx в MediaWiki перед доктайпом есть неизвестный скрипт

143
Простейший API с удаленным сайтом на php и js

Простейший API с удаленным сайтом на php и js

Пытаюсь сделать простейший API между одним сайтом и другим, попробовать реализовать самый простейший вариант, а именно просто отправить запрос...

108
Передача данных с PHP (Yii2) в Vue.js

Передача данных с PHP (Yii2) в Vue.js

Постоянно возникает необходимость передать данные модели Yii2 во Vuejs

114