Ask your JavaScript questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

get the autocomplete to work immediately after speaking a name JavaScript

  • SOLVED

https://stackoverflow.com/questions/13498382/how-to-use-jquery-ui-autocomplete-w-chrome-speech-input

I have a website: https://verlager.com/cccr

I have an input field with jquery ui autocomplete and speech recognition.

How can I get the autocomplete to work immediately after speaking a name?

JS:

<script src="js/jquery-ui.min_autocomplete_tool.js"></script>

<script>
$('.autocomplete-2').on('webkitspeechchange', function() {
$('.autocomplete-2').trigger('autocompleteopen');
});
</script>

HTML:

<input type = "text" id = "P1" onblur="calcEntryFee(this);" maxlength = "27" name = "Player_Name" class = "autocomplete-2 text person speech-input" /></div>
<input type = "text" id = "P2" onblur="calcEntryFee(this);" maxlength = "27" name = "Player_Name" class = "autocomplete-2 text person speech-input" /></div>

EXISTING JS:


<script>
// on page ready ...
$(function() {

// check for support
const SR = window.SpeechRecognition || window.webkitSpeechRecognition || null;
if ( !SR ) return console.warn( 'No SpeechRecognition API support.' );

// each of the form rows...
$( '#reg > .universal' ).each( function() {

// target speech input and button inside each row
const $input = $( '.speech-input', this );
//const $btn = $( '.speech-btn', this );

// when the button is pressed...
//$btn.on( 'click', function() {
$input.on( 'click', function() {

// setup the new SpeechRecognition instance
const rec = new SR();
rec.interimResults = true;
rec.lang = 'en-US';
rec.start();

// when speech is detected, process text and add to input
rec.addEventListener( 'result', e => {
const text = Array.from( e.results ).map( r => r[0] ).map( r => r.transcript ).join( '' );
$input.val( text );
});

});

});

});
</script>

Answers (1)

2019-09-09

Rainner Lins answers:

You can try to trigger the autocomplete event on the input after the speech has ended using an event listener. Here's the addition to the code I just gave you.

https://jsfiddle.net/rainnerlins/2ve7rd5a/


User180435 comments:

This code doesn't load the autocomplete. To verify, see https://verlager.com/cccr and say "Birmingham" at the first input field. "Birmingham" pops up but no autocomplete.


User180435 comments:

Of course I added your new code.


Rainner Lins comments:

Alright, instead of waiting for the speech detect to end, let's try checking the input for change:

https://jsfiddle.net/rainnerlins/kfgrwuo5/


User180435 comments:

still doesn't work. Wouldn't that stackoverlow link I posted in the question be a solution? Probably not.


Rainner Lins comments:

Looks like I was trying to trigger the autocomplete wrong, it's:


// https://api.jqueryui.com/autocomplete/#method-search
$input.autocomplete( 'search' );


Seems to work for me, give it a try.

https://jsfiddle.net/rainnerlins/8x6mo7z4/