Форум

ellexpron · #1 (**permalink**) 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 · #2 (**permalink**) 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 · #3 (**permalink**) 12.10.2018, 16:11

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

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

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

Nexus · #4 (**permalink**) 12.10.2018, 16:30

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

Dilettante_Pro · #5 (**permalink**) 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 · #6 (**permalink**) 14.10.2018, 13:50

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

ellexpron · #7 (**permalink**) 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 · #8 (**permalink**) 14.10.2018, 15:46

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

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

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

ellexpron · #9 (**permalink**) 14.10.2018, 16:37

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

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

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

j0hnik · #10 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript