Jquery Autocomplete selected id not getting saved

Question

I am trying to get the selected value from the jquery autocomplete for some reason I am not able to get the id. I saw a solution here http://www.codeproject.com/Articles/152558/jQuery-UI-Autocomplete-with-ID but my data returns like below How should I get the id saved?

My data

[{"id":3,"homename":"DCosta"}]

My code

$("#lastname").autocomplete({
     source: function (request, response) {
     var term = request.term;
     if (term in cache) {
         response(cache[term]);
        return;
     }
      $.ajax({
        type: 'POST',
        url: someurl,
        dataType: 'json',
        data: { "Name": request.term},
        success: function (result) {
              var Surnames = JSON.parse(result.data);
              cache[term] = ($.map(Surnames, function (item) {
               return {
                          label: item.homename,
                          //value: item.id  //<== if I do like this the id show in the text box which I do now want
                          value: item.homename //<== this shows correctly but the id is not accessable
                       }
                 }));
             response(cache[term]);
         },

         error: function (a, b, c) {
                       debugger;
         }
      });

      },
        select: function (event, ui) {
         self.Surname(ui.item.value); // save selected value
          console.log(self.Surname());  // shows ID if value: item.id or just the name

     },
           minLength: 2
});

Answer 1

You could add a hidden field to store your id (let's give it an id of myhiddenid) and set your autocomplete field's value to the label returned from your function. Adding return false; will cancel the event's default behavior

The default action is to replace the text field's value with the value of the selected item.

var myhiddenid = $("#myhiddenid");
var lastname = $("#lastname");

lastname.autocomplete({
     source: function (request, response) {
     var term = request.term;
     if (term in cache) {
         response(cache[term]);
        return;
     }
      $.ajax({
        type: 'POST',
        url: someurl,
        dataType: 'json',
        data: { "Name": request.term},
        success: function (result) {
              var Surnames = JSON.parse(result.data);
              cache[term] = ($.map(Surnames, function (item) {
               return {
                          label: item.homename,
                          value: item.id
                       }
                 }));
             response(cache[term]);
         },

         error: function (a, b, c) {
                       debugger;
         }
      });

      },
        focus: function (event, ui) {
         lastname.val(ui.item.label);
         myhiddenid.val(ui.item.value);
         return false;

     },
        select: function (event, ui) {
         lastname.val(ui.item.label);
         myhiddenid.val(ui.item.value);
         self.Surname(ui.item.value);
         console.log(self.Surname());
         return false;    
     },
           minLength: 2
});