CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Harue
Harue

Reputation: 149

Different result between google maps Autocomplete and AutocompleteService

I'm using google maps APIv3 AutocompleteService to fetch data to a bootstrap's typeahead. However the result a little inaccurate comparing with the result return by using the built-in autocomplete of google.

My HTML code:

<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've posted full code here: http://jsbin.com/ididas/1/edit

For example when I input

9 dinh tien hoang

to the first box, it will display 5 results. But when i input the same query to second box, it will display only 2 results.

My questions is why does they have this different and how can I repair so that my custom typeahead work perfectly as the built-in autocomplete

Upvotes: 3

Views: 2386

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

For me the service.getPlacePredictions() also returns 5 results. The problem occurs in $.typeahead, because when you 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(e.g. a search for d will not match a Đ, it's a completely different character).

As you don't need any filtering at all for $.typeahead()( because the autocompleteService already returns filtered results) you may add this to the $.typeahead-options:

matcher:function(){return true;}

Upvotes: 3

Related Questions