AngularJS + UI Bootstrap Typeahead implementation issue

Question

I am trying to implement Typeahead using my Web Api controller by adopting to this code, that works fine:

HTML

<div class='container-fluid' ng-controller="TypeaheadCtrl2">
    <pre>Model: {{result | json}}</pre>
    <input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
</div>

Controller in app.js

myApp.controller('TypeaheadCtrl2', function ($scope, $http, limitToFilter) {

    //http://www.geobytes.com/free-ajax-cities-jsonp-api.htm

    $scope.cities = function (cityName) {
        return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q=" + cityName).then(function (response) {
            return limitToFilter(response.data, 15);
        });
    };
});

However when I change return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q=" + cityName) to call my own WebApi controller return $http.jsonp("api/airports/" + cityName) it stops working.

But if I call my Web Api directly, like http://mysite:80/api/airports/los it returns this json:

["San Martin DeLos Andes (CPC)","San Carlos DeBariloche (BRC)","Los Menucos (LMD)","Paso De Los Libres (AOL)","Barbelos (BAZ)","Los Angeles (LSQ)","Los Chiles (LSL)","Mali Losinj (LSZ)","Milos (MLO)","Volos (VOL)","Paso Caballos (PCG)","Los Mochis (LMM)","Vilanculos (VNX)","San Carlos (NCR)","Lagos (LOS)","Losuia (LSA)","Lossiemouth (LMO)","Los Angeles (JID)","Los Angeles (JBP)","Los Alamos (LAM)","Los Angeles (LAX)","Los Banos (LSN)","Lost Harbor (LHB)","Lost River (LSR)","San Carlos (SQL)","Los Angeles, CA (VNY)","Los Angeles (WHP)","Los Roques (LRV)"]

which is in exactly the same format as returned by http://gd.geobytes.com/AutoCompleteCity?filter=US&q=los:

["Los Alamitos, CA, United States","Los Alamos, CA, United States","Los Alamos, NM, United States","Los Altos, CA, United States","Los Angeles, CA, United States","Los Banos, CA, United States","Los Ebanos, TX, United States","Los Fresnos, TX, United States","Los Gatos, CA, United States","Los Indios, TX, United States","Los Lunas, NM, United States","Los Molinos, CA, United States","Los Ojos, NM, United States","Los Olivos, CA, United States","Los Osos, CA, United States","Losantville, IN, United States","Lost City, WV, United States","Lost Creek, KY, United States","Lost Creek, PA, United States","Lost Creek, WV, United States"]

Please advise.

same domain then u don't need jsonp, but if you wanted jsonp to work with web api you have to install the formatters — Tom Stickel
– Tom Stickel, Commented Oct 20, 2015 at 5:12

Fedaykin · Accepted Answer · 2014-08-14 17:10:28Z

1

Try to use ´$http.get´ separate the promise from the assingment of ´$scope.cities´:

myApp.controller('TypeaheadCtrl2', function ($scope, $http, limitToFilter) {

    $http.get("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q=" + cityName).then(function (response) {
        $scope.cities = limitToFilter(response.data, 15);
    });
});

answered Aug 14, 2014 at 17:10

Fedaykin

4,5723 gold badges25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

superconsultant Over a year ago

Thanks man. Solution above has solved my problem, I believe it similar to yours. Just more refined. I am starting to get a handle on Angular, but still far from decent.

Fedaykin Over a year ago

Oh yeah they are both equivalent, I just prefer not to mix the things with various functions and returns one inside another, javascript can be very confusing sometimes lol. A nice thing you can lookup next is how to create a service and put all your $http requests in it, so your controllers would not need the $http nor the endpoint address.

superconsultant Over a year ago

Thanks again. My recent goal is to establish proof of concept scenarios for all the Angularjs controls (suggestion lists, dropdowns, calendars, routing , etc) , so I can start converting my WebForms app to Angular app with mini spa's. Any Examples you can point me to for modal pop-ups with search capabilities using Angular?

runTarm · Accepted Answer · 2014-08-14 17:12:24Z

0

There is no need to use JSONP if your Web Api is on the same domain as your angularjs application (and your Web Api doesn't seems to support JSONP anyway).

You could just use a simple GET request like this:

$scope.cities = function (cityName) {
    return $http.get("api/airports/" + cityName).then(function (response) {
        return limitToFilter(response.data, 15);
    });
};

Hope this helps.

answered Aug 14, 2014 at 17:12

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

Comments

Coder John · Accepted Answer · 2014-08-14 16:39:17Z

0

I think your typeahead is expecting a JSON object. And your API is returning javascript array. It should return possibly in below format:

{['CITY1', 'CITY2', 'CITY3']}

answered Aug 14, 2014 at 16:39

Coder John

7864 silver badges7 bronze badges

1 Comment

superconsultant Over a year ago

But as I mentioned above if I run web api directly in my url address it writes to the page exactly the same string as Google's gd.geobytes.com/AutoCompleteCity web service writes to the page.

Collectives™ on Stack Overflow

AngularJS + UI Bootstrap Typeahead implementation issue

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related