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

nut · 02.08.2020, 15:00

Есть локальный 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>

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

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

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

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

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

ADSoft · 03.08.2020, 06:50

Скорее всего простых вариантов нет... Ибо выпадающие списки автоподстановки работают по принципу ajax запросов. Нажал кнопку - обновленный запрос ушел Яндексу, он вернул список ответов ,- отобразили в выпадающем списке их.

В локальной версии так не сделать, а то что вы на встроенную форму ссылаетесь вообще не относится к теме вопроса, и юо это встроенный поиск Яндекса на уровне браузера.

В принципе можно написать js, и им дергать. Но я думаю что Яндексу это не понравится и он или запретит Аякс запросы к форме автодополнения, либо капчу начнет показывать. Обычно используют апи какое то которое эти ответы отдает

nut · 16.08.2020, 23:44

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

Всё, должно работать, как в самом Яндексе.

02.08.2020, 15:00	#1
nut Пользователь Регистрация: 16.09.2009 Сообщений: 18	Yandex suggest, XMLHttpRequest - на локальной странице Есть локальный html-файл, там форма для поиска в Яндексе: Код: `<form action="https://yandex.ru/search" style="font-size:16; border-radius:10px; padding:10; background:yellow"> <b>Поиск в <font color="red">Я</font>ндексе:</b>  <input id="srch" name="text" size="140" style="font-size:16"> </form>` (мне так удобно, т.к. список важных ссылок я храню на этой локальной странице). Передача запроса в Яндекс производится отлично, но мне хотелось бы, чтобы при наборе текста выпадали подсказки, как на самом Яндексе. Я никак не могу найти, что мне нужно прописать в html-коде, чтобы это реализовать. То, что подсказки выдаёт скрипт [url1]https://suggest.yandex.ru/suggest-ya.cgi?part=%s[/url], это я знаю. Но прикрутить его к локальному html-у пытался через XMLHttpRequest, а тот не работает с другими доменами. Варианты через php не рассматриваю, т.к. слишком сложно - нужен сервер с его поддержкой, а хотелось бы по-простому: воткнул код в html - и заработало. Кроме того, в firefox (а именно им я пользуюсь) на домашней странице есть форма поиска Яндекса - и в ней выпадают подсказки, но я так и не смог врубиться, как же он их дёргает. Есть ли варианты?

03.08.2020, 06:50	#2
ADSoft Старожил Регистрация: 25.02.2007 Сообщений: 4,184	Скорее всего простых вариантов нет... Ибо выпадающие списки автоподстановки работают по принципу ajax запросов. Нажал кнопку - обновленный запрос ушел Яндексу, он вернул список ответов ,- отобразили в выпадающем списке их. В локальной версии так не сделать, а то что вы на встроенную форму ссылаетесь вообще не относится к теме вопроса, и юо это встроенный поиск Яндекса на уровне браузера. В принципе можно написать js, и им дергать. Но я думаю что Яндексу это не понравится и он или запретит Аякс запросы к форме автодополнения, либо капчу начнет показывать. Обычно используют апи какое то которое эти ответы отдает Сайты, приложения, автоматизация в широком смысле слова Последний раз редактировалось ADSoft; 03.08.2020 в 06:54.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
XMLHttpRequest()	linkoln_7	JavaScript, Ajax	2	08.02.2015 16:37
Объясните XMLHTTPREQUEST	SL1M_DOGG	PHP	0	08.04.2013 21:56
Возврат результата XMLHttpRequest	kos1nus	JavaScript, Ajax	11	20.08.2011 19:16
Ajax. Видимость XMLHttpRequest.	Викдон	JavaScript, Ajax	0	03.08.2010 18:09
Вопрос по XMLHttpRequest	NeveX	JavaScript, Ajax	7	25.09.2009 09:34