function getHTMLString(users) {
  console.log(users)
   if (!users.length) {
     return 'No massage'
   }
  return users
    .map(user => `<li>${user.name}</li>`)
    .join('</br>');
}

function renderUserName() {
  const {value} = select;
  if (!value) {
    return;
  }
  const filteredUsers = json
    .filter(({name})=> name.toLowerCase().startsWith(value.toLowerCase()))
  listItems.innerHTML = getHTMLString(filteredUsers)   
}

renderUserName();

select.addEventListener('change', renderUserName)

 <div>
    <h1>
      PI, YALL!
    </h1>
    <p>
      {Math.PI.toFixed(20)}
    </p>
  </div>