Different result between Google Maps Autocomplete and AutocompleteService

Question

I am using google maps APIv3 AutocompleteService to retrieve data in bootstrap typeahead. However, the result is slightly inaccurate compared to returning the result using google's built-in autocomplete.

My HTML is:

<label>Built-in</label><input type="text" id="address1" /> <label>Customize</label><input type="text" id="address2" /> 

My script:

 <script> //this input use google built-in autocomplete var input1 = document.getElementById('address1'); autocomplete = new google.maps.places.Autocomplete(input1); //this input use google AutocompleteService $('#address2').typeahead({ source: process_keyword }); var service = new google.maps.places.AutocompleteService(); function process_keyword(query, process) { var place_results = []; var request = { input: query, types: ['geocode'] }; service.getPlacePredictions(request, function (predictions, status) { process($.map(predictions, function (prediction) { return prediction.description; })); }); } </script> 

I posted the full code here: http://jsbin.com/ididas/1/edit

For example, when I enter

9 dinh tien hoang

in the first square, it will display 5 results. But when I enter the same query in the second block, it will display only 2 results.

My questions are why they have it different and how can I fix it, so my custom typehhead works fine as built-in autocomplete

Answer 1

For me, service.getPlacePredictions() also returns 5 results. The problem arises in $.typeahead , because when you search for 9 dinh tien hoang , and the service returns 9 Đinh Tiên Hoàng , the query string does not match the result (for example, a search for d will not match Đ , this is a completely different character).

Since you do not need any filtering for $.typeahead() (because the autocompleteService already returns filtering results), you can add this to the $ .typeahead option:

 matcher:function(){return true;}