Полезная информация

Пользователи не любят читать документацию. Станьте оригинальным, будьте не как все. Ознакомьтесь с нашей базой знаний.

№102-08-2020 15:11:59

pointer
Участник
 
Группа: Members
Откуда: планета Земля
Зарегистрирован: 09-12-2011
Сообщений: 40
UA: Firefox 79.0

Yandex suggest, XMLHttpRequest - на локальной странице

Есть локальный html-файл, там форма для поиска в Яндексе:

[code=html]

Выделить код

Код:

<form action="https://yandex.ru/search" style="font-size:16; border-radius:10px; padding:10; background:yellow">
 <b>Поиск в <font color="red">Я</font>ндексе:</b>&nbsp;
 <input id="srch" name="text" size="140" style="font-size:16">
</form>

[/code]

(мне так удобно, т.к. список важных ссылок я храню на этой локальной странице).

Передача запроса в Яндекс производится отлично, но мне хотелось бы, чтобы при наборе текста выпадали подсказки, как на самом Яндексе. Я никак не могу найти, что мне нужно прописать в html-коде, чтобы это реализовать.

То, что подсказки выдаёт скрипт suggest.yandex.ru/suggest-ya.cgi?part=%s, это я знаю. Но прикрутить его к локальному html-у пытался через XMLHttpRequest, а тот не работает с другими доменами. Варианты через php не рассматриваю, т.к. слишком сложно - нужен сервер с его поддержкой, а хотелось бы по-простому: воткнул код в html - и заработало.

Кроме того, в firefox (а именно им я пользуюсь) на домашней странице есть форма поиска Яндекса - и в ней выпадают подсказки, но я так и не смог врубиться, как же он их дёргает.

Есть ли варианты?

Отсутствует

 

№202-08-2020 16:52:52

zzzephire
Участник
 
Группа: Members
Зарегистрирован: 29-12-2017
Сообщений: 791
UA: Firefox 79.0

Re: Yandex suggest, XMLHttpRequest - на локальной странице

Конкретного не смогу подсказать, но насколько помнится это реализуется с помощью JavaScript

Отредактировано zzzephire (02-08-2020 16:54:51)

Отсутствует

 

№302-08-2020 18:01:45

pointer
Участник
 
Группа: Members
Откуда: планета Земля
Зарегистрирован: 09-12-2011
Сообщений: 40
UA: Firefox 79.0

Re: Yandex suggest, XMLHttpRequest - на локальной странице

Пример на https://frontendscript.com/javascript-search-box-with-suggestions-dropdown/ работает в моём файле, но когда меняю провайдера подсказок на suggest.yandex.ru/suggest-ya.cgi?part=, то опять ничего не работает. :(

Отсутствует

 

№403-08-2020 16:16:23

mokujin
Участник
 
Группа: Members
Зарегистрирован: 17-02-2017
Сообщений: 494
UA: Chrome 57.0

Re: Yandex suggest, XMLHttpRequest - на локальной странице

pointer ну а в Консоль глянуть? Уверен, там у тя будет чёнить из ошибок в CORS или CSP .


...программисты словно войну какую-то ведут за свои обновления. Блин, почему сейчас повсюду мания ухудшать интерфейсы и делать их максимально неудобными?! Radiation

Отсутствует

 

№504-08-2020 19:26:49

pointer
Участник
 
Группа: Members
Откуда: планета Земля
Зарегистрирован: 09-12-2011
Сообщений: 40
UA: Firefox 79.0

Re: Yandex suggest, XMLHttpRequest - на локальной странице

Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на https://suggest.yandex.ru/suggest-ya.cgi?v=4&part=%D0%BF%D1%80%D0%BE. (Причина: отсутствует заголовок CORS «Access-Control-Allow-Origin»).

Тот же xhr, ничего нового.

Просто меня интересует, как на стандартной домашней странице firefox форма поиска Яндекса без проблем выдаёт подсказки.

Отсутствует

 

№604-08-2020 23:45:42

okkamas_knife
We are the Borg.       Resistance is futile.
 
Группа: Members
Зарегистрирован: 21-10-2009
Сообщений: 9558
UA: Seamonkey 2.14

Re: Yandex suggest, XMLHttpRequest - на локальной странице

смотри в opensearch.xml


я помню те времена когда обновления программ убирали проблемы и исправляли баги, а не добавляли их.
toxID:05AB9B827D896AACEE7FF4573A02FB8F025F46ADC856B98F65BC1BA9BD21A81DC98BA9C36CE3

Отсутствует

 

№705-08-2020 16:20:22

pointer
Участник
 
Группа: Members
Откуда: планета Земля
Зарегистрирован: 09-12-2011
Сообщений: 40
UA: Firefox 79.0

Re: Yandex suggest, XMLHttpRequest - на локальной странице

okkamas_knife пишет

opensearch.xml

А можно поподробнее? Куда что нужно воткнуть, а то тут я совсем нуб. ;)

Отсутствует

 

№805-08-2020 16:55:12

mokujin
Участник
 
Группа: Members
Зарегистрирован: 17-02-2017
Сообщений: 494
UA: Chrome 57.0

Re: Yandex suggest, XMLHttpRequest - на локальной странице

Что такое CORS?
Что такое CORS
Cross-Origin Resource Sharing (CORS) - HTTP | MDN
Руководство по кросс-доменным запросам (CORS)
... я тоже не очень, кхм... шарю, так, шаманим потихоньку для удовоьствия. Но это уже давно известная хрень. Сначала были CSP(их хоть можно было применить для полезности, блочить рекламу нопример скриптеками), потом пошли всякие CORS-ы, шобих.
Кури!

pointer пишет

Просто меня интересует, как на стандартной домашней странице firefox форма поиска Яндекса без проблем выдаёт подсказки.

Делает правильные запросы, соттв-щие стандартам ↑

Добавлено 05-08-2020 17:02:19
зы. раньше, ЕЯПП, эту хрень в FF можно было отключить security.fileuri.strict_origin_policy = false  Как сейчас, хз.

Отредактировано mokujin (05-08-2020 17:02:19)


...программисты словно войну какую-то ведут за свои обновления. Блин, почему сейчас повсюду мания ухудшать интерфейсы и делать их максимально неудобными?! Radiation

Отсутствует

 

№905-08-2020 17:56:21

pointer
Участник
 
Группа: Members
Откуда: планета Земля
Зарегистрирован: 09-12-2011
Сообщений: 40
UA: Firefox 79.0

Re: Yandex suggest, XMLHttpRequest - на локальной странице

mokujin, покурил, эх-х, так CORS должен быть разрешён на стороне Яндекса в моём случае, а это из разряда фантастики.
Впрочем, я нашёл похожее, но рабочее решение: https://wiki.greasespot.net/GM.xmlHttpRequest. Всё равно Greasemonkey я пользуюсь, пусть ещё послужит на благо.

Отсутствует

 

№1005-08-2020 18:42:30

okkamas_knife
We are the Borg.       Resistance is futile.
 
Группа: Members
Зарегистрирован: 21-10-2009
Сообщений: 9558
UA: Seamonkey 2.14

Re: Yandex suggest, XMLHttpRequest - на локальной странице

скачиваешь https://yandex.ru/opensearch.xml открываешь в блокноте и смотришь сравниваешь со своим поделием.


я помню те времена когда обновления программ убирали проблемы и исправляли баги, а не добавляли их.
toxID:05AB9B827D896AACEE7FF4573A02FB8F025F46ADC856B98F65BC1BA9BD21A81DC98BA9C36CE3

Отсутствует

 

№1116-08-2020 23:54:54

pointer
Участник
 
Группа: Members
Откуда: планета Земля
Зарегистрирован: 09-12-2011
Сообщений: 40
UA: Firefox 79.0

Re: Yandex suggest, XMLHttpRequest - на локальной странице

В общем, нашёл решение через аддон Greasemonkey (для firefox).

Кому интересно:
1. Устанавливаете Greasemonkey в firefox.
2. На локальной странице оставляете такой код:

Выделить код

Код:

<head>
 <!-- Для выпадающих подсказок -->
 <style type="text/css">
  .rysul {list-style-type:none; margin:0px}
  .rysli {margin-left:-40px; padding-left:10px; padding-top:5px; padding-bottom:6px; cursor:pointer; font:16px sans-serif}
 </style>
 <!-- /Для выпадающих подсказок -->
...
</head>
 
...
 
<form action="https://yandex.ru/search" id="frmsrch" style="font-size:16; border-radius:10px; padding:10; background:yellow">
 <b>Поиск в <font color="red">Я</font>ндексе:</b>&nbsp;
 <input id="srch" name="text" size="140" style="font-size:16"/>
</form>
<div id="rys" style="position:absolute; display:none; border:1px solid black; background-color:#FFFBF0"></div>

Стили можно менять, id-шники не трогайте.

3. В Greasemonkey создаёте скрипт с любым названием:

Выделить код

Код:

// ==UserScript==
// @name     getYaSuggest
// @version  1
// @grant    GM.xmlHttpRequest
// ==/UserScript==
 
//Переменные для настройки скрипта (остальные задаются в стилях HTML-страницы)
var setLenVal = 3 //Минимальное кол-во символов для запроса подсказок
var setColorSel = "#FFEBA0" //Цвет выделенного пункта
 
//Ниже - собственно рабочий код
ro = new Object();
ro.method = "GET";
ro.onload = receiveYaSuggest;
 
srch = document.getElementById('srch');
rys = document.getElementById('rys');
frmsrch = document.getElementById('frmsrch');
 
rys.style.left = srch.getBoundingClientRect().left + window.scrollX;
rys.style.top = srch.getBoundingClientRect().bottom + window.scrollY;
rys.style.width = srch.getBoundingClientRect().width;
 
srch.addEventListener('keyup', getYaSuggest, false);
srch.addEventListener('focus', getYaSuggest, false);
srch.addEventListener('mousedown', getYaSuggest, false);
srch.addEventListener('blur', function() {rys.style.display = "none"}, false);
srch.addEventListener('keydown', srchKeydown, false);
 
var i = 0;
var arrli = new Array();
 
function getYaSuggest(event) {
  if ((event.key == 'ArrowDown') ||
      (event.key == 'ArrowUp') ||
      (event.key == 'ArrowRight') ||
      (event.key == 'ArrowLeft') ||
      (event.key == 'Escape') ||
      (event.key == 'Enter')) {return};
  if (srch.value.length >= setLenVal) {
      ro.url = "https://suggest.yandex.ru/suggest-ya.cgi?part=" + srch.value;
      GM.xmlHttpRequest(ro)
  } else {rys.style.display = "none"};
}
 
function receiveYaSuggest(r)
{
  arr = r.responseText.substring( r.responseText.indexOf("[",16)+1, r.responseText.indexOf("]") ).replace(new RegExp("\"","g"),"").split(",");
  if ((arr.length != 0) && (arr[0] != "")) {
      rys.style.display = "block";
      arrs = "<ul class=\"rysul\" id=\"idrysul\">";
      arr.forEach(function(item) {arrs = arrs + "<li class=\"rysli\">"+item+"</li>"});
      arrs+="</ul>";
      document.getElementById('rys').innerHTML = arrs;
      arrli = Array.from( document.getElementById('idrysul').getElementsByTagName("li") );
      arrli.forEach( function(item) {item.addEventListener('mousedown', function() {srch.value = this.innerText; frmsrch.submit()}, false)} );
      arrli.forEach( function(item) {item.addEventListener('mouseenter', function() {i = arrli.indexOf(this); HlSel()}, false)} );
      i=0;
  } else {rys.style.display = "none"}
};
 
function srchKeydown(event) {
  if (arrli.length == 0) {return};
  if (event.key == 'ArrowDown') { i++; if (i>(arrli.length-1)) {i=0}; HlSel();  srch.value = arrli[i].innerText; };
  if (event.key == 'ArrowUp')   { i--; if (i<0) {i=arrli.length-1}; HlSel();  srch.value = arrli[i].innerText; };
  if (event.key == 'Enter')     { rys.style.display = "none" };
  if (event.key == 'Escape')    { rys.style.display = "none" };
}
 
function HlSel() {
  if (arrli.length == 0) {return};
  arrli.forEach( function(item) {item.style.backgroundColor = "transparent"} );
  arrli[i].style.backgroundColor = setColorSel;
}

Что-то похожее на Яндекс будет. Наверное, можно и гугл сделать - оставляю это на самостоятельную работу :)

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]