Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 02.08.2020, 15:00   #1
nut
Пользователь
 
Регистрация: 16.09.2009
Сообщений: 15
Вопрос 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>&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 (а именно им я пользуюсь) на домашней странице есть форма поиска Яндекса - и в ней выпадают подсказки, но я так и не смог врубиться, как же он их дёргает.

Есть ли варианты?
nut вне форума Ответить с цитированием
Старый 03.08.2020, 06:50   #2
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию

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

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

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

Последний раз редактировалось ADSoft; 03.08.2020 в 06:54.
ADSoft вне форума Ответить с цитированием
Старый 16.08.2020, 23:44   #3
nut
Пользователь
 
Регистрация: 16.09.2009
Сообщений: 15
По умолчанию

В общем, нашёл решение через аддон 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;
}
Всё, должно работать, как в самом Яндексе.
nut вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
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