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

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Поиск по всплывающему списку (https://javascript.ru/forum/dom-window/75469-poisk-po-vsplyvayushhemu-spisku.html)

Поиск по всплывающему списку

Добрый день!

Имеется код, который был взят из Интернета. Код работает, но требуется сделать так, чтобы при нахождении требуемой строки, при её нажатии срабатывала гиперссылка на "https://...".
Пример - я пишу "адрес абон.." он находит строку "'Адрес абонентского отдела/ЦПО',". Требуется, чтобы при нажатии на эту строку, происходила переадресация. Подскажите код на двух строках, пожалуйста. Или имеется возможность облегчить код?

<html xmlns="http://www.w3.org/1999/xhtml">
<BODY>
<div id="podst"></div>
<INPUT type="text" class="opis" />
 
<script>
var streetArr=[
'Адрес абонентского отдела/ЦПО',
'Время работы абонентского отдела/ЦПО',
'Настройка роутера',
'Настройка модема',
].sort();
 
 
document.onkeyup=function(e)
{
e=e||window.event;
E=e.srcElement||e.target;
if(E.className=="opis")
    {
    current_Target=E;
        var autocompl='';
        var m=0;
        for(var i=0;i<streetArr.length;i++)
                {
                if(streetArr[i].toLowerCase().indexOf(current_Target.value.toLowerCase())!=-1)
                    {
                    autocompl+="<option value='"+streetArr[i]+"'>"+streetArr[i]+"<\/option>";m++;
                    }
                }
        if(autocompl!="")
            {if(m>20){m=20}
            document.getElementById("podst").innerHTML='\
            <select  \
            multiple size='+m+' >'+autocompl+'<\/select>';
            }
        else{}
    }
}
 
 
</SCRIPT>
</BODY>
</html>

<ul>
   <li><a href = "https://javascript.ru/forum/">Форум JavaScript</a></li>
   <li><a href = "https://learn.javascript.ru/">Учебник JavaScript</a></li>
</ul>

Цитата:

Сообщение от Dilettante_Pro (Сообщение 496185)

<ul>
   <li><a href = "https://javascript.ru/forum/">Форум JavaScript</a></li>
   <li><a href = "https://learn.javascript.ru/">Учебник JavaScript</a></li>
</ul>

Подскажи, пожалуйста, а в какие строки вписать?

ellexpron, Dilettante_Pro, предлагает вам использовать в кач-ве контейнера под результаты не select, а ul.
В этом случае никаких костылей с редиректами не понадобится писать.

<html xmlns="http://www.w3.org/1999/xhtml">
<BODY>
<div id="podst"></div>
<INPUT type="text" class="opis" />
 
<script>
var streetArr=[
['Адрес абонентского отдела/ЦПО','https://javascript.ru/forum/'],
['Время работы абонентского отдела/ЦПО','https://javascript.ru/book'],
['Настройка роутера','https://learn.javascript.ru/'],
['Настройка модема','https://learn.javascript.ru/quiz'],
].sort();
 
 
document.onkeyup=function(e)
{
var e=e||window.event;
var E=e.srcElement||e.target;
if(E.className=="opis")
    {
    current_Target=E;
        var autocompl='';
        var m=0;
        for(var i=0;i<streetArr.length;i++)
                {
                if(streetArr[i][0].toLowerCase().indexOf(current_Target.value.toLowerCase())!=-1)
                    {
                    autocompl+="<option value='"+streetArr[i][1]+"'>"+streetArr[i][0]+"<\/option>";m++;
                    }
                }
        if(autocompl!="")
            {if(m>20){m=20}
            document.getElementById("podst").innerHTML='\
            <select  \
             multiple size='+m+' >'+autocompl+'<\/select>';
            }
        else{}
    }
}
document.onclick=function(e)
{ 
   var e=e||window.event;
   var E=e.srcElement||e.target;
   if(E.tagName=="OPTION") {
      window.location = E.value;
   }
}
</SCRIPT>
</BODY>
</html>

Скрипт работает отлично. Гиперссылки работают.
Проблема в том, что данный скрипт, который Вы написали, работает на всех браузерах, за исключением IE10+.
Нужно, чтобы скрипт работал на IE11, через который происходит работа.
На IE выдает следующую ошибку:

Может быть, стоит взять код попроще и использовать следующее?

<html>
<body>

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

</body>
</html>

Только гиперссылки не работают. Что я делаю не так?

<option value="https://vk.com/">Internet Explorer</option>

Цитата:

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

На IE выдает следующую ошибку:

Окно "Привет из 90-х" 256 цветов прям ностальгия по вин98

Цитата:

Сообщение от j0hnik (Сообщение 496266)

Окно "Привет из 90-х" 256 цветов прям ностальгия по вин98

Я делаю через CssMagic. Собственно, вопрос по сабжу.

<html xmlns="http://www.w3.org/1999/xhtml">
<BODY>
<div id="podst"></div>
<INPUT type="text" class="opis" />
 
<script>
var streetArr=[
['Адрес абонентского отдела/ЦПО','https://javascript.ru/forum/'],
['Время работы абонентского отдела/ЦПО','https://javascript.ru/book'],
['Настройка роутера','https://learn.javascript.ru/'],
['Настройка модема','https://learn.javascript.ru/quiz'],
].sort();
 
 
document.onkeyup=function(e)
{
var e=e||window.event;
var E=e.srcElement||e.target;
if(E.className=="opis")
    {
    current_Target=E;
        var autocompl='';
        var m=0;
        for(var i=0;i<streetArr.length;i++)
                {
                if(streetArr[i][0].toLowerCase().indexOf(current_Target.value.toLowerCase())!=-1)
                    {
                    autocompl+="<option value='"+streetArr[i][1]+"'>"+streetArr[i][0]+"<\/option>";m++;
                    }
                }
        if(autocompl!="")
            {if(m>20){m=20}
            document.getElementById("podst").innerHTML='\
            <select  \
             multiple size='+m+' >'+autocompl+'<\/select>';
            }
        else{}
    }
}
document.onclick=function(e){ 

   var e=e||window.event;
   var E=e.srcElement||e.target;
   if(E.tagName=="OPTION" || E.value && E.tagName=="SELECT") {
      window.location = E.value;
   }
}
</SCRIPT>
</BODY>
</html>

ellexpron,
глянуть E.tagName не догадались?

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

Malleys,
ну если ты взял, то точно полетит. :D