JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>

    <meta charset=utf-8 />
    <title>Autocomplete Bug Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>

  </head>

  <body>    
    <h1>Autocomplete Bug Demo</h1>
      
    <div class="newRow">
      <label for="country">Country</label>
      <input id="country" />
    </div>
  
    <div>
      <label for="person">Person</label>
      <input id="person" />
    </div>
    
  </body>
</html>

CSS

h1{
    margin-bottom: 20px;
}
label {
    display: inline-block;
    width: 70px;
    margin-right: 10px;
    
}
.newRow{
    margin-bottom: 5px;
}

JavaScript

var personBackendData = [
    {firstName:"Michael", lastName:"Jackson", fullName:"Michael Jackson", age:"41"},
    {firstName:"Michael", lastName:"Jordan", fullName:"Michael Jordan", age:"23"},
    {firstName:"Michael", lastName:"Buffer", fullName:"Michael Buffer", age:"99"},
    {firstName:"Michael", lastName:"Knight", fullName:"Michael Knight", age:"50"},
    {firstName:"Michael", lastName:"Schumacher", fullName:"Michael Jackson", age:"40"}
    ];

var countryBackendData = [        
    {country:"United States of America", code:"USA"},
    {country:"Germany", code:"DE"},
    {country:"United Kingdom", code:"UK"},
    {country:"China", code:"CN"},
    {country:"Iran", code:"IR"},
    {country:"Brazil", code:"BR"},
    {country:"Switzerland", code:"CH"},
    {country:"Austria", code:"AU"},
    {country:"Romania", code:"RO"}
];

var i, oDataTmp, autoComplDataArr;

//create autocomplete data for person field
autoComplDataArr= [];
for(i=0;i<5; i++){
    console.log("for loop: "+i);
    oDataTmp = personBackendData[i];
    autoComplDataArr.push({
        oData : oDataTmp,
        value : oDataTmp.fullName,
        label : oDataTmp.fullName +" (" + oDataTmp.age +")"
    });
}

$('#person').autocomplete({
    source : autoComplDataArr, ///autocomplete_tc_testcasename
    select: function(event, ui) {
        var oData = ui.item.oData;
        alert('firstName: '+oData.firstName+'\n'
              +'lastName: '+oData.lastName+'\n'
              +'fullName: '+oData.fullName+'\n'
              +'age: '+oData.age
             );
    },
    minLength: 0
});


//create autocomplete data for country field
autoComplDataArr= [];
for(i=0;i<9; i++){
    oDataTmp = countryBackendData[i];
    autoComplDataArr.push({
        oData : oDataTmp,
        value : oDataTmp.country,
        label : oDataTmp.country +" (" + oDataTmp.code +")"
    });
}

$('#country').autocomplete({
    source : autoComplDataArr,
    select: function(event, ui) {
        var oData = ui.item.oData;
       ...