Jquery Mobile autocomplete plug in
hello guys
i'm a newbie to jquery mobile and am developing a mobile application. Am having a problem with making one of my lists autocomplete when typing into the search box using a remote data source. I have done a bit of research and found out about the jqm autocomplete plugin it seems to be working but the problem is that i cant see the actual values from my remote data source all i get is "undefined" values on my list. Please help
see code below
<title> Data</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="jqm.autoComplete-1.5.2-min.js"></script>
</head>
<body>
<div data-role="page" id="mainpage">
<div data-role="fieldcontain">
<label for="search">Your city: </label>
<input type="text" id="search" placeholder="Test">
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</div>
</div>
<script>
$("#mainpage").bind("pageshow", function(e){
$("#search").autocomplete({
method:'GET',
target: $("#suggestions"),
source: "http://localhost:38605/api/manufacturer/",
callback: function(e){
var $a=$.parseJSON(e.currentTarget);
$("#search").val($a.text());
$("#search").autocomplete('clear');
},
link : 'target.html?term=',
minLength:1
});
});
</script>
</body>
</html>
my remote datasource code uses a Web APi
public class ManufacturerController : ApiController
{
private List<Manufacturer> manufacturers = new List<Manufacturer>();
public ManufacturerController()
{
manufacturers.Add(new Manufacturer(1, "Audi"));
manufacturers.Add(new Manufacturer(2, "BMW"));
manufacturers.Add(new Manufacturer(3, "Mazda"));
manufacturers.Add(new Manufacturer(4, "Nissan"));
manufacturers.Add(new Manufacturer(5, "Ford"));
manufacturers.Add(new Manufacturer(6, "Mitsubishi"));
manufacturers.Add(new Manufacturer(7, "Toyota"));
manufacturers.Add(new Manufacturer(8, "VolksWagen"));
manufacturers.Add(new Manufacturer(9, "Renault"));
}
public IEnumerable<Manufacturer> GetManufacturers()
{
return manufacturers;
}
}
}
this is the response i get