Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Yandex suggest, XMLHttpRequest - на локальной странице

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

polromserg

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

Всего записей: 25 | Зарегистр. 31-12-2017 | Отправлено: 14:48 02-08-2020 | Исправлено: polromserg, 14:52 02-08-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
polromserg

Цитата:
по-простому: воткнул код в html - и заработало

такого не будет.
 

Цитата:
и в ней выпадают подсказки, но я так и не смог врубиться, как же он их дёргает.

там меньше ограничений, из-за того, что не просто страница.
 

Цитата:
т.к. слишком сложно - нужен сервер с его поддержкой

в php есть свой сервер (правда однопоточный в Windows)
https://www.php.net/manual/ru/features.commandline.webserver.php
 
ну или в настройках FF можно разрешить CORS
https://developer.mozilla.org/ru/docs/Web/HTTP/CORS
или через локальный прокси добавлять нужный заголовок в ответ сервера.

Всего записей: 9709 | Зарегистр. 20-09-2014 | Отправлено: 20:09 02-08-2020 | Исправлено: Mavrikii, 21:19 02-08-2020
polromserg

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
В общем, нашёл решение через аддон 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;
}

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

Всего записей: 25 | Зарегистр. 31-12-2017 | Отправлено: 23:33 16-08-2020
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Yandex suggest, XMLHttpRequest - на локальной странице


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.Board
© Ru.Board 2000-2020

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru