jQuery autocomplete putting incorrect val in input-CodePudding

I'm using jQuery autocomplete with 2 text inputs but when I select an item from the dropdown list, it's putting the value in the #site_name input instead of the label

<input type="text" name="site" id="site" readonly="readonly" />
<input type="text" id="site_name"  />

<script type="text/javascript">
$(document).ready(function() {
  var data = [{"value":"4","label":"Site A"}];
  $('#site_name').autocomplete({
    source: data,
    select: function(event, ui) {
      $('#site').val( ui.item.value );
      $('#site_name').val( ui.item.label );
    },
  });
});
</script>

CodePudding user response：

just add event.preventDefault(); to the select method like so

$(document).ready(function() {
   var data = [{"value":"4","label":"Site A"}];
  $('#site_name').autocomplete({
    source: data,
    select: function( event, ui ) {
     event.preventDefault();
     $('#site').val( ui.item.value );
     $('#site_name').val(ui.item.label);
    }
  });
});

I hope this helps