javascript - Typeahaed.js not working with WebApi Controller -

i'm trying use typeahead.js webapi controller. seemed simple task, no - there nothing working, no errors, no warnings, nothing. here js part:

<script>         $(document).ready(function () {             $('#hotel_dest').typeahead({                 name: 'citysearch',                 minlength: 3,                 highlight: true,                 valuekey: "destination",                 remote: {                     url: 'http://localhost:63270/api/citysearch?q=%query',                     filter: function (response) {                         return response;                     }                 },                 limit: 10             }); </script> 

here pretty simple controller:

namespace booking.controllers {     public class citysearchcontroller : apicontroller     {         hotelbedsentities db = new hotelbedsentities();         public class citysearch         {             public string destination { get; set; }         }         public iqueryable<citysearch> getdestination(string q)         {             var = b in db.localizeddestination                     join c in db.localizedcountryname on b.hbcountrycode equals c.hbcountrycode                     b.destinationrusname.contains(q)                     select new citysearch                     {                         destination = b.destinationrusname + "(" + b.hbdestinationcode + ")" + c.ruscountryname                     };             return a.asqueryable();         }     } } 

the controller returns correct data far can see, not have idea wrong.

@brunis, suggestion, problem on client side. solution follow:

var citylist = new bloodhound({                 datumtokenizer: bloodhound.tokenizers.obj.whitespace('destination'),                 querytokenizer: bloodhound.tokenizers.whitespace,                 limit: 10,                 remote: 'http://localhost:63270/api/citysearch?q=%query'             });             citylist.initialize();             $('#hotel_dest').typeahead({                 hint: true,                 highlight: true,                 minlength: 1             },                 {                     name: 'destination',                     displaykey: 'destination',                     source: citylist.ttadapter()                 }             );