Thara
Thara

Reputation: 281

Autocomplete with API

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

Answers (1)

preethi
preethi

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

Related Questions