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

ellexpron 12.10.2018 15:39

Поиск по всплывающему списку
 
Добрый день!

Имеется код, который был взят из Интернета. Код работает, но требуется сделать так, чтобы при нахождении требуемой строки, при её нажатии срабатывала гиперссылка на "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>

Dilettante_Pro 12.10.2018 15:50

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

ellexpron 12.10.2018 16:11

Цитата:

Сообщение от 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>

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

Nexus 12.10.2018 16:30

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

Dilettante_Pro 12.10.2018 16:34

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

ellexpron 14.10.2018 13:50

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


ellexpron 14.10.2018 14:35

Может быть, стоит взять код попроще и использовать следующее?
<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>

j0hnik 14.10.2018 15:46

Цитата:

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

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

ellexpron 14.10.2018 16:37

Цитата:

Сообщение от j0hnik (Сообщение 496266)
Окно "Привет из 90-х" 256 цветов прям ностальгия по вин98

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

j0hnik 14.10.2018 17:16

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


Часовой пояс GMT +3, время: 11:13.