JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="depart" />
<input type="text" id="id_ville" />

JavaScript

$("#depart").autocomplete({
    source: [ 
        {"label": "Ville1", "departement": "00001", "id_ville": "1"},
        {"label": "Ville2", "departement": "00002", "id_ville": "2"},
        {"label": "Ville3", "departement": "00003", "id_ville": "3"},
        {"label": "Ville4", "departement": "00004", "id_ville": "4"}
    ],
    select : function( event, ui ){
      $( "#depart" ).val(ui.item.label + " / " + ui.item.departement); // dans le champ visible
      $('#id_ville').val(ui.item.id_ville); // dans le champ caché
      return false;
    } /* Le coté un peu technique dans ce cas, il faut redéfinir la liste affichée par l'autocomplete en surchargeant "_renderItem" */
  }).data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
      .data( "item.autocomplete", item )
      .append( "<a>" + item.label + " / " + item.departement + "</a>" )
      .appendTo( ul );
  };