How to use jQuery UI Autocomplete w / Chrome Speech Input

Question

Recently, I started using an excellent feature in Chrome, which allows you to turn any input field into speech input that the user can dictate. More info here .

Adding this feature to Chrome is not easy:

<input type="text" x-webkit-speech="x-webkit-speech" /> <!-- you're all set --> 

I want to implement this function in the main search box on my website, which uses the jQuery UI autocomplete widget widely ... However, I cannot force the autocomplete widget to start after the dictated text is inserted into the input field.

I have already tried the options for the following:

 <input id="search-input-box" type="search" x-webkit-speech="x-webkit-speech" onwebkitspeechchange="$('.search-input-box').trigger('autocompleteopen')"> 

How can I trigger an “open” auto-complete event after a speech input change event?

UPDATE: Solved - jsApplying the solution here

Answer 1

Just bind it to the webkitspeechchange event, for example:

 $('#tags').on('webkitspeechchange', function() { $('#tags').trigger('autocompleteopen'); }); 

jsFiddle