Javascript-форум - Поиск по всплывающему списку

Dilettante_Pro, j0hnik, я взял за основу ваш не корректно работающий код.

var streetArr=[
['Адрес абонентского отдела/ЦПО','https://javascript.ru/forum/'],
['Время работы абонентского отдела/ЦПО','https://javascript.ru/book'],
['Настройка роутера','https://learn.javascript.ru/'],
['Настройка модема','https://learn.javascript.ru/quiz'],
].sort();

alert(streetArr.length); // В каком JS окружении будет 5, а не 4?

Цитата:

Сообщение от ellexpron

работает на всех браузерах

Как минимум у 32% пользователей не работает, поскольку использован <select multiple>, который предполагает множественный выбор (и событие click не происходит, поскольку всплывает системное диалоговое окно). Т. е. открывается диалог с множественным выбором вариантов и всё!

У вас получается список ссылок, так и используйте список ссылок!

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
	<input type="text" class="opis" />
	<div id="podst"></div>

	<script>

var streetArr = [
['Адрес абонентского отдела/ЦПО','https://javascript.ru/forum/'],
['Время работы абонентского отдела/ЦПО','https://javascript.ru/book'],
['Настройка роутера','https://learn.javascript.ru/'],
['Настройка модема','https://learn.javascript.ru/quiz'], // (!)
];

document.onkeyup = function(event) {
	var event = event || window.event;
	var target = event.srcElement || event.target;

	if(/(^|\s)opis(\s|$)/.test(target.className)) {
		var html = [];

		for(var i = 0; i < streetArr.length && target.value !== ""; i++) {
			if(
				streetArr[i] !== undefined && // (!)
				streetArr[i][0]
					.toLowerCase()
					.indexOf(target.value.toLowerCase()) != -1
			) {
				html.push(
					'<li><a href="', streetArr[i][1], '">',
						streetArr[i][0],
					'</a></li>'
				);
			}
		}

		document.getElementById("podst").innerHTML =
			html.length !== 0 ?
				'<ul>' + html.join("") + '</ul>' : '';
	}
};

		</script>
		<style>
			/* просто пример */
			#podst ul {
				padding: 0;
				margin-top: 0;
				border: 1px solid #eee;
				display: inline-block;
				list-style: none;
			}

			#podst li {
				margin: 0;
				padding: 0;
			}

			#podst a {
				display: block;
				padding: 1em;
				color: black;
				text-decoration: none;
			}

			#podst a:focus, #podst a:hover {
				background-color: #eee;
			}
		</style>
	</body>
</html>

Работает в браузерах Android Chrome и Internet Explorer 8+ включительно