>Форум Mozilla Россия http://forum.mozilla-russia.org/index.php >Поддержка пользователей http://forum.mozilla-russia.org/viewforum.php?id=26 >Yandex suggest, XMLHttpRequest - на локальной странице http://forum.mozilla-russia.org/viewtopic.php?id=75772 |
pointer > 02-08-2020 15:11:59 |
Есть локальный 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> <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 > 02-08-2020 16:52:52 |
Конкретного не смогу подсказать, но насколько помнится это реализуется с помощью JavaScript |
pointer > 02-08-2020 18:01:45 |
Пример на https://frontendscript.com/javascript-search-box-with-suggestions-dropdown/ работает в моём файле, но когда меняю провайдера подсказок на suggest.yandex.ru/suggest-ya.cgi?part=, то опять ничего не работает. |
mokujin > 03-08-2020 16:16:23 |
pointer ну а в Консоль глянуть? Уверен, там у тя будет чёнить из ошибок в CORS или CSP . |
pointer > 04-08-2020 19:26:49 |
Тот же xhr, ничего нового. Просто меня интересует, как на стандартной домашней странице firefox форма поиска Яндекса без проблем выдаёт подсказки. |
okkamas_knife > 04-08-2020 23:45:42 |
смотри в opensearch.xml |
pointer > 05-08-2020 16:20:22 |
okkamas_knife пишет
А можно поподробнее? Куда что нужно воткнуть, а то тут я совсем нуб. |
mokujin > 05-08-2020 16:55:12 |
Что такое CORS? pointer пишет
Делает правильные запросы, соттв-щие стандартам ↑ 05-08-2020 17:02:19 |
pointer > 05-08-2020 17:56:21 |
mokujin, покурил, эх-х, так CORS должен быть разрешён на стороне Яндекса в моём случае, а это из разряда фантастики. |
okkamas_knife > 05-08-2020 18:42:30 |
скачиваешь https://yandex.ru/opensearch.xml открываешь в блокноте и смотришь сравниваешь со своим поделием. |
pointer > 16-08-2020 23:54:54 |
В общем, нашёл решение через аддон Greasemonkey (для firefox). Кому интересно: Выделить код Код:<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> <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; } Что-то похожее на Яндекс будет. Наверное, можно и гугл сделать - оставляю это на самостоятельную работу |