Поправить выпадающий список
230
27 октября 2017, 14:37
нужно что бы когда я начинаю вводить в поле город - в подсказке всплывали не все, а только начинающиеся на введенную букву
если введена А - показываются армавир и абакан
<html>
<head>
<script type="text/javascript" language="javascript">
var autocomplete = ['абакан', 'армавир', 'баку', 'биробиджан', 'вильнюс'];
window.onload = function() {
document.getElementById('input').onkeyup = keyUp;
}
function keyUp(e) {
var e = e||window.event;
switch(e.keyCode) {
case 40:
var selected = -1;
var spans = document.getElementById('autocomplete').getElementsByTagName('span');
for(i=0;i<=spans.length;i++)
if (i in spans && spans[i].className == 'selected') {
spans[i].className = '';
selected = i;
}
selected++;
for(i=0;i<=spans.length;i++)
if (i in spans && i == selected) {
spans[i].className = 'selected';
}
break;
case 38:
var spans = document.getElementById('autocomplete').getElementsByTagName('span');
var selected = spans.length;
for(i=0;i<=spans.length;i++)
if (i in spans && spans[i].className == 'selected') {
spans[i].className = '';
selected = i;
}
selected--;
for(i=0;i<=spans.length;i++)
if (i in spans && i == selected) {
spans[i].className = 'selected';
}
break;
case 13:
var spans = document.getElementById('autocomplete').getElementsByTagName('span');
for(i=0;i<=spans.length;i++)
if (i in spans && spans[i].className == 'selected') {
document.getElementById('input').value = spans[i].innerHTML;
document.getElementById('autocomplete').innerHTML = '';
}
break;
default:
var div = document.getElementById('autocomplete');
div.innerHTML = '';
if (document.getElementById('input').value.length > 0) {
autocomplete.forEach(function(elem, index) {
div.innerHTML += '<span>'+autocomplete[index]+'</span><br />';
});
}
}
}
</script>
<style>
input {
position: absolute;
top: 10px;
left: 150px;
}
#autocomplete {
position: absolute;
top: 40px;
left: 150px;
}
span.selected {
background-color: red;
}
</style>
</head>
<body>
<input type="text" id="input" />
<div id="autocomplete"></div>
</body>
</html>Answer 1
Привет, да поможет тебе RegEx. Ну или попроще: elem.includes(value). Смотри Fiddle
default:
var div = document.getElementById('autocomplete');
var value = document.getElementById('input').value;
div.innerHTML = '';
if (value.length > 0) {
autocomplete.forEach(function(elem, index) {
var regex = new RegExp("^" + value, "i");
if(elem.match(regex)) div.innerHTML += '<span>'+autocomplete[index]+'</span><br />';
});
}
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47875 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30563 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23871 visits
- Как через css изменить цвет png изображения? 10388 visits
- Blob video url download 9998 visits
- Php curl запрос через прокси с авторизацией 9260 visits
- Работа с captcha vk api 8139 visits
© "hostciti.net" 16.3.2025 | 01:44