Reputation: 281
I am new to API... I am struggling with autocomplete... I cant able to fetch the items from the link for suggestions. here is my jquery:
$(function(){
$("#sugg").autocomplete({
source :function( request, response ) {
$.ajax({
url: "https://rkdemotask.herokuapp.com/Tasks",
dataType: "json",
data: {
q: request.term
},
success: function( data ) {
response($.map(data, function(item) {
return {
Id:item.Id,
label : item.Title,
value : item.Status
};
}));
}
});
},
select: function (event, ui) {
$("#sugg").val(ui.item.Id)
$("#name").val(ui.item.Title);
$("#value").val(ui.item.Status);
return false;
}
});
});
and https://rkdemotask.herokuapp.com/Tasks contains
[{"Id":"1","Title":"fastrack_2000","Status":"./../assets/img2.jpg"},{"Id":"2","Title":"chota beam_670","Status":"./../assets/img1.jpg"},{"Id":"5","Title":"Fastrack_1200 ","Status":"./../assets/img5.jpg"},{"Id":"4","Title":"Titan_2000","Status":"./../assets/img4.jpg"}]
my text boxes
<input type="text" id="sugg" />
<input type="text" id="name" />
<input type="text" id="value" />
Upvotes: 4
Views: 874
Reputation: 248
Use select tag or list input type for autocomplete and You need to append the value to the corresponding select tag by its id..
$(function(){
$("#sugg").autocomplete({
source :function( request, response ) {
$.ajax({
url: "https://rkdemotask.herokuapp.com/Tasks",
dataType: "json",
data: {
q: request.term
},
success: function( data ) {
var user = new String()
user = data.Title;
for (i = 0; i < user.length; i++) {
$('#select')
.append($('<option>', {value: user[i]})
.text(user[i]));
}
}
});
},
}); });
Upvotes: 2