Veve Veve - 5 months ago 26
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:

<html>
<head>
<title>Exemple</title>
</head>
<body>
<input type="text" id="address" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></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();
$('#address').typeahead({
highlight: true
}, {
displayKey: 'description',
source: addressPicker.ttAdapter()
});

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

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

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


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

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


(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
addresspicker:selected
event, and the lien(3) return this error:


TypeError: result.nameForType is not a function


I know the type of object returned by the
typeahed:autocomplete
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
addressPicker
.

Answer

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!

Comments