jQuery UI autocomplete store the selected items ID in input's value attribute

Question

I am working on a dynamic time sheet. My project field is using jQuery autocomplete which pulls its data from a json file. Once an item has been selected from autocomplete, I'm trying to set the value="" of the input field to the id of the selected item.

My json file contents is like this

{
  "projectList": [{
    "label": "Some Project",
    "id": "BP1927",
    "desc": "desc1"
  }, {
    "label": "Some Other Project",
    "id": "BP1827",
    "desc": "desc1"
  }, {
    "label": "BOSS Support",
    "id": "BP6354",
    "desc": "desc3"
  }, {
    "label": "Another Support",
    "id": "BP2735"
  }]
}

What I want to do is when I select the first item Some Project , I want to show Some Project in the input-box and store the ID "BP1927" in the value attribute of the input-box.

With my current code, my autocomplete will return project label to the input box, but when I inspect the input element, it will always show the value as being "BP2735"- which happens to be the last object within the json file. What am I doing wrong?

 jQuery(function($) { var rowTemplate = $('table.tablesubmit>tbody>tr:first').remove(); var autoComp = { source: function(request, response) { var regex = new RegExp(request.term, 'i'); response($.map(myJSONdata.projectList, function(item) { if (regex.test(item.id) || regex.test(item.label)) { return { label: item.label, value: item.label, id: item.id }; } $("#project").attr("value", item.id); })); } }; $('.pluslink').click(function(event) { var newRow = rowTemplate.clone(); newRow.find('input:first').autocomplete(autoComp); $('table.tablesubmit tr:last').before(newRow); }); $("table.tablesubmit").on('click', '.minuslink', function(e) { $(this).parent().parent().remove(); }); $('.pluslink').click(); //Creates the first row }); var myJSONdata = { "projectList": [{ "label": "Some Project", "id": "BP1927", "desc": "desc1" }, { "label": "Some Other Project", "id": "BP1827", "desc": "desc1" }, { "label": "BOSS Support", "id": "BP6354", "desc": "desc3" }, { "label": "Another Support", "id": "BP2735" }] } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <table class="tablesubmit"> <thead> <tr> <th width="30%">Project name</th> <th width="10%">Mon</th> <th width="10%">Tue</th> <th width="10%">Wed</th> <th width="10%">Thur</th> <th width="10%">Fri</th> <th width="10%">Sat</th> <th width="10%">Sun</th> <th></th> </tr> </thead> <tbody> <tr> <td> <input class="form-control full-width" id="project" type="text"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="1.25"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="0"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="5"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="1"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="5.5"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="0"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="0"> </td> <td> <button class="btn btn-danger minuslink">Delete</button> </td> </tr> <tr> <td class="bold" width="25%"> <a>Total Time:</a> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="7.25" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="8" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="7.5" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="7" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;"> </td> <td>37.5</td> </tr> </tbody> </table> <button class="btn btn-primary pluslink">Add new project</button> 

Answer 1

Updated answer as per chat discussion with OP

The problem is that you are trying to set the attribute when the suggestion list is being generated.

   source: function(request, response) {
      var regex = new RegExp(request.term, 'i');
      response($.map(myJSONdata.projectList, function(item) {
        if (regex.test(item.id) || regex.test(item.label)) {
          return {
            label: item.label,
            value: item.label,
            id: item.id
          };
        }
        $("#project").attr("value", item.id);
      }));
    }

So when the suggestion list is being generated every item is putting it's id in the value attribute and thus you are seeing the last items id while inspecting the element afterwards.

You have to set the value when a suggestion is selected, when when the suggestion list is being generated. The correct way to do this is to pass a input change event handler to autocomplete, that will set your attribute whenever a suggestion is selected.

    change: function(event, ui) {
        if(ui.item){ //this checks if any value is selected
            $(event.target).attr('value',ui.item.id);
        }
    },

Jquery UI autocomplete change event documentation.

 jQuery(function($) { var rowTemplate = $('table.tablesubmit>tbody>tr:first').remove(); var autoComp = { change: function(event, ui) { if(ui.item)$(event.target).attr('value',ui.item.id); }, source: function(request, response) { var regex = new RegExp(request.term, 'i'); response($.map(myJSONdata.projectList, function(item) { if (regex.test(item.id) || regex.test(item.label)) { return { label: item.label, value: item.label, id: item.id }; } $("#project").attr("value", item.id); })); } }; $('.pluslink').click(function(event) { var newRow = rowTemplate.clone(); newRow.find('input:first').autocomplete(autoComp); $('table.tablesubmit tr:last').before(newRow); }); $("table.tablesubmit").on('click', '.minuslink', function(e) { $(this).parent().parent().remove(); }); $('.pluslink').click(); //Creates the first row }); var myJSONdata = { "projectList": [{ "label": "Some Project", "id": "BP1927", "desc": "desc1" }, { "label": "Some Other Project", "id": "BP1827", "desc": "desc1" }, { "label": "BOSS Support", "id": "BP6354", "desc": "desc3" }, { "label": "Another Support", "id": "BP2735" }] } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css"/> <table class="tablesubmit"> <thead> <tr> <th width="30%">Project name</th> <th width="10%">Mon</th> <th width="10%">Tue</th> <th width="10%">Wed</th> <th width="10%">Thur</th> <th width="10%">Fri</th> <th width="10%">Sat</th> <th width="10%">Sun</th> <th></th> </tr> </thead> <tbody> <tr> <td> <input class="form-control full-width" id="project" type="text"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="1.25"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="0"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="5"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="1"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="5.5"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="0"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="0"> </td> <td> <button class="btn btn-danger minuslink">Delete</button> </td> </tr> <tr> <td class="bold" width="25%"> <a>Total Time:</a> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="7.25" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="8" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="7.5" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="7" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;"> </td> <td>37.5</td> </tr> </tbody> </table> <button class="btn btn-primary pluslink">Add new project</button>