0

нужно что бы когда я начинаю вводить в поле город - в подсказке всплывали не все, а только начинающиеся на введенную букву

если введена А - показываются армавир и абакан

<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>

7
  • Если в велосипедостроении нет особой необходимости, можно воспользоваться готовым: select2.org/getting-started/basic-usage 26 окт 2017 в 12:13
  • спасибо, но у них ни один пример не работает,
    – NormalArs
    26 окт 2017 в 12:41
  • <head> <link href="css/select2.min.css" rel="stylesheet" /> <script src="js/select2.min.js"></script> </head> <body> <select class="js-example-basic-multiple" name="states[]" multiple="multiple"> <option value="AL">Alabama</option> <option value="WY">Wyoming</option> </select> <script> $(document).ready(function() { $('.js-example-basic-multiple').select2(); }); </script>
    – NormalArs
    26 окт 2017 в 12:41
  • выдает квадратик с 2 штатами и икакого поиска
    – NormalArs
    26 окт 2017 в 12:42
  • проверьте консоль, мне кажется у Вас jQuery не установлен. $(document).ready(function() { $('.js-example-basic-multiple').select2(); }); Эта строчка не выполнится без jQuery. 26 окт 2017 в 14:38

1 ответ 1

0

Привет, да поможет тебе 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 />';
            });
        }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.