Veve Veve - 1 year ago 83
Javascript Question

How to bind a custom function when the typeahead suggestion is selected/autocomplete with tab key?

I'm using this jQuery plugin typeahead-addresspicker, allowing to get suggestion from Google, as showed in this demo. (I'm using the plugin without a map displayed)

When the user select an element from the suggested list of results, I'm successfully using the event of the plugin.

But I didn't managed to bind a custom function when the user select the suggested ("typeaheaded") entry with Tab. (The whole point of using a typeahead version of the plugin)

Update: in (2), I've managed to get the correct event fired, but not
the correct result, see at the end.

Here is what I've tried:

<input type="text" id="address" />
<script src=""></script>
<script src="jquery-2.0.2.min.js"></script>
<script src="typeahead.bundle.min.js"></script>
<script src="typeahead-addresspicker.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
var addressPicker = new AddressPicker();
highlight: true
}, {
displayKey: 'description',
source: addressPicker.ttAdapter()

//Works, planned in the plugin
$(addressPicker).on('addresspicker:selected', function (event, result) {

//Doesn't work
$(addressPicker).on('typeahead:selected', function (event, result) {

//(1) Doesn't work too
$(addressPicker).on('typeahead:autocomplete', function (event, result) {

$('#address').on('typeahead:autocomplete', function (event, result) {

//(2) This almost works, I've got the event fired, but no luck running correctly setResult with it
function setResults(result) {
var premise = result.nameForType("premise"); //(3)

(1) Looking directly the typeahead.js doc and experimenting with their demo page, when I add the following code via the console:

$('#demo-input').on('typeahead:autocomplete', function(ev, suggestion) {
console.log('autocomplete : ' + suggestion);

I successfully managed to capture the event on the autocomplete of the suggestion via Tab, without having to intercept it from the key down event.

Now I just have to make it work for the typeahead-addresspicker...

(2) While the event is corretly fired, the result returned isn't the same as with the
event, and the lien(3) return this error:

TypeError: result.nameForType is not a function

I know the type of object returned by the
event isn't the one expected, provoquing the error.

I'm now searching how to get the correct object type and how to pass it to

Answer Source

I finally managed to get it working by adding this code, normally made to update the map, but even if I use the address picker without map, it made the correct event firing with the correct result type:

$('#address').bind("typeahead:autocompleted", addressPicker.updateMap);

If anyone has a proper method to achieve the same result, I'll take it!