Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы » Как сделать функцию вызова результатов быстрого поиска при голосовом вводе?

Как сделать функцию вызова результатов быстрого поиска при голосовом вводе?


     13.05.2018    javascript, быстрый поиск, поиск по сайту    Общие вопросы, jQuery, Хаки, Ламерские вопросы    1931

вопрос
Все привет! решил прибомбить к строке быстрого поиска голосовой набор

форма поиска в main.tpl

<form id="q_search" class="top--serch-forma" method="post">
      <div class="q_search">
       <form id="voiceSearch" method="get" action="https://www.google.com/search">   
       <input id="story" name="story" placeholder="События, рестораны, кафе, бары, интересные места..." type="search">
       <i title="Talk to me" onclick="startDictation()" class="fa fa-microphone" aria-hidden="true"></i>       
       </form>    
       <button class="top_search_btn" type="submit" title="Найти">Найти</button>
      </div>
      <input type="hidden" name="do" value="search">
      <input type="hidden" name="subaction" value="search">
     </form>


файл libs.js


  function startDictation() {

    if (window.hasOwnProperty('webkitSpeechRecognition')) {

      var recognition = new webkitSpeechRecognition();

      recognition.continuous = false;
      recognition.interimResults = true;

      recognition.lang = "ru-RU";
      recognition.start();

	  document.getElementsByName('story')[0].focus();
	  
	  
      recognition.onresult = function(e) {
        document.getElementById('story').value
                                 = e.results[0][0].transcript;
        recognition.stop();
        // document.getElementById('voiceSearch').submit();	
				
      };
			
			recognition.onspeechend = function() {
				recognition.stop();
			}

      recognition.onerror = function(e) {
        recognition.stop();
      }

    }
  }


И все бы круто, нажимаешь кнопку - говоришь - текст вписывается в форму поиска - НО блин не появляются результаты быстрого поиска не фига - ставишь пробел - все круто появляется - вводишь вручную - тоже все круто

помогите решить проблемку!

при голосовом вводе
Как сделать функцию вызова результатов быстрого поиска при голосовом вводе?

PS - после голосового ввода любое нажатие на клаве сразу срабатывает и показывает результаты

при ручном вводе
Как сделать функцию вызова результатов быстрого поиска при голосовом вводе?




Ответил: BRAGA


Если посмотреть код js DLE, а именно функцию FastSearch(), то можно заметить, что она цепляет поле поиска на событие input, значит нам нужно вставить текст и затригерить это событие.
$('#story').val('Мой текст').trigger('input');

Для теста можно закинуть этот код в консоль здесь, на dle-faq.

10 комментариев

BRAGA
Юзер

BRAGA - 13 мая 2018 23:33 -

Или на Plain javascript
var search = document.getElementById('story');
search.value = 'Мой текст';
search.dispatchEvent(new Event('input', { bubbles: true }));

BRAGA
Юзер

BRAGA - 13 мая 2018 23:44 -


Кстати, Web Speech API частично поддерживается только Chrome, учтите это при показе кнопки микрофона.

Ivan Kharlov
Юзер

Ivan Kharlov - 14 мая 2018 00:17 -

Да я в курсе ну это так сказать для хрома и есть такой небольшой бонус в других браузерах эта кнопка и не показывается

Честно говоря я в js вообще почти не чего не понимаю - то что вы написали я не втыкаю куда сувать пробывал засунуть в событие после окончания голосового ввода толи пустата толи заменяю значение - МОЙ Текс на фукцию формирования голосового текста- суть не изменилась все так же текст вставляется и все...

подумал о такой штуке что может попробывать реализовать функцию эмуляции нажатия клавиши после ввода - ну тоже тишина сижу смотрю на функцию в dle_js.js - FastSearch() как баран на новые ворота так и не могу воткнуть гиде этот вызов - точнее понимаю где он а как он срабатывает не воткну ни как...

BRAGA
Юзер

BRAGA - 14 мая 2018 00:21 -

А так не пробовали?
recognition.onresult = function(e) {
	var story = document.getElementById('story');
	story.value = e.results[0][0].transcript;
	story.dispatchEvent(new Event('input', { bubbles: true }));
	recognition.stop();
};

Ivan Kharlov
Юзер

Ivan Kharlov - 14 мая 2018 00:24 -

да пробывал - щас еще раз попробывал - тишина...

BRAGA
Юзер

BRAGA - 14 мая 2018 00:25 -

может попробывать реализовать функцию эмуляции нажатия клавиши после ввода

Метод dispatchEvent грубо говоря это и делает, он тригерит событие input на которое привязаны функции Dle для поиска. Логика такая, что вы вставляется текст в поле поиска и тогда тригерите событие input, dle функция срабатывает, забирает значения из поля поиска и показывает результаты.

BRAGA
Юзер

BRAGA - 14 мая 2018 00:31 -

Только что попробовал вставить этот код в консоль dle-faq, после разрешения на использование микрофона сказал: "Поиск" и это слово сразу же залетело в поле поиска и показался быстрый поиск Dle, все работает.
 if (window.hasOwnProperty('webkitSpeechRecognition')) {
	var recognition = new webkitSpeechRecognition();
	var story = document.getElementById('story');
	recognition.continuous = false;
	recognition.interimResults = true;
	recognition.lang = "ru-RU";
	recognition.start();
	recognition.onresult = function(e) {
		story.value = e.results[0][0].transcript;
		story.dispatchEvent(new Event('input', { bubbles: true }));
		recognition.stop();
	};
	recognition.onspeechend = function() {
		recognition.stop();
	};
	recognition.onerror = function(e) {
		recognition.stop();
	};
}

Ivan Kharlov
Юзер

Ivan Kharlov - 14 мая 2018 00:44 -

ну у меня на сайте тишина полная... может конфликтует чет с чем то

BRAGA
Юзер

BRAGA - 14 мая 2018 15:39 -

Так скиньте ссылку на сайт или будем дальше гадать?

lutskboy
Эксперт

lutskboy - 14 мая 2018 15:49 -

после

document.getElementById('story').value
                                 = e.results[0][0].transcript;

вставить

if($('#story').val().length>3) $('#story').trigger('change');

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх