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

pointer · №1

Есть локальный 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 (а именно им я пользуюсь) на домашней странице есть форма поиска Яндекса - и в ней выпадают подсказки, но я так и не смог врубиться, как же он их дёргает.

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

zzzephire · №2

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

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

pointer · №3

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

mokujin · №4

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

pointer · №5

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

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

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

okkamas_knife · №6

смотри в opensearch.xml

pointer · №7

okkamas_knife пишет

opensearch.xml

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

mokujin · №8

Что такое 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)

pointer · №9

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

okkamas_knife · №10

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

pointer · №11

В общем, нашёл решение через аддон 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;
}

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

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

№102-08-2020 15:11:59