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"
  }]
}




  
    
      Project name
      Mon
      Tue
      Wed
      Thur
      Fri
      Sat
      Sun
      
    
  
  
    
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
    
    
      
        Total Time:
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      37.5

Munim Munna · Accepted Answer

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"
  }]
}






  
    
      Project name
      Mon
      Tue
      Wed
      Thur
      Fri
      Sat
      Sun
      
    
  
  
    
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
    
    
      
        Total Time:
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      37.5

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

Answers (1)

Related Questions

jQuery UI autocomplete store the selected items ID in input&#39;s value attribute

Answers (1)

Related Questions

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