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+ включительно