Question

I’ve just recently started utilizing a nifty feature in Chrome that allows you to turn any input field into a speech input a user can dictate into. More info here.

Adding this feature itself is dead-simple in Chrome:

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

I want to implement this feature in my website’s main search box, which heavily utilizes jQuery UI’s autocomplete widget… However I can’t get the autocomplete widget to fire after the dictated text is inserted into the input field.

I’ve already tried variations of 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 the autocomplete “open” event after the speech input change event has occurred?

UPDATE: Solved – jsFiddle of solution here

Answer 1

Just bind it to the webkitspeechchange event, eg:

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

jsFiddle