Custom Autocomplete Component Ember Cli not working

Question

I not sure why the return is not being passed to the component template. It's listening and the value is found but its not working.

return result.resources; is not returning the data when result.resoures has an array of objects.

here is the autocomplete template auto-complete.hbs

    <ul>
        <li class='row input-group-lg'>
            {{input type="text" value=searchText placeholder="Enter Street Address" class='col-md-6 col-md-offset-3 col-xs-12 street-address'}}
        </li>


    </ul>
    <ul>
        {{#each searchResults}}
            <li>{{this.name}}</li>
        {{/each}}
    </ul>

here is auto-complete.js

import Ember from 'ember';

export default Ember.Component.extend({
        searchText: null,

        searchResults: function() {
            var searchText = this.get('searchText');
            if(!searchText) {
                return;
            }
            Ember.$.ajax({
                url: "http://dev.virtualearth.net/REST/v1/Locations",
                dataType: "jsonp",
                data: {
                    key: "",
                    q: searchText
                },
                jsonp: "jsonp"
            }).then(function(data) {
                var result = data.resourceSets[0];
                if (result) {
                    if (result.estimatedTotal > 0) {
                        return result.resources;
                    }
                }
            });
        }.property('searchText')
});

Hyder Hyder · Accepted Answer · 2014-09-18T08:48:19

The code block

.then(function(data) {
            var result = data.resourceSets[0];
            if (result) {
                if (result.estimatedTotal > 0) {
                    return result.resources;
                }
            }

will return from the promise and will not return the value for the computed property, which obviously means that you are not returning anything for the CP.

A possible work around can be

searchResults: function() {
        var searchText = this.get('searchText');
        var searchResults = Ember.ArrayProxy.create();
        if(!searchText) {
            return;
        }
        Ember.$.ajax({
            url: "http://dev.virtualearth.net/REST/v1/Locations",
            dataType: "jsonp",
            data: {
                key: "",
                q: searchText
            },
            jsonp: "jsonp"
        }).then(function(data) {
            var result = data.resourceSets[0];
            if (result) {
                if (result.estimatedTotal > 0) {
                    searchResults.set('content',result.resources);
                }
            }
        });
        return searchResults;
    }.property('searchText')

You can create an arrayproxy and return the arrayproxy for the CP. Upon completion of the promise, set the result as content to the arrayproxy, which will update the template.

Custom Autocomplete Component Ember Cli not working

1 Answers