displaying "no results" if input doesn't match array name (javascript)

Question

I have a search function that lets the user search for an item, and if stored, will display a message (inside my results div) if it's in stock or not.

I would like a "no results" message to display until the search finds a result.

I've tried but I'm having trouble. If you guys could help, I'd really appreciate it.

Here's my full code:

var user = document.getElementById('user');
var results = document.getElementById('results');

$('#user').keyup(function() {
  search(user.value);
});

var apples = {
  firstName: "apples",
  stock: "in stock"
};

var bananas = {
  firstName: "bananas",
  stock: " not in stock"
};

var contacts = [apples, bananas];

function printPerson(person) {
  results.innerHTML = (person.firstName + " are " + person.stock);
}

function list() {
  var contactsLength = contacts.length;
  for (var i = 0; i < contactsLength; i++) {
    printPerson(contacts[i]);
  }
}


function search(match) {
  var contactsLength = contacts.length;

  for (var i = 0; i < contactsLength; i++) {
    if (contacts[i].firstName == match) {
      printPerson(contacts[i]);
    }
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="user" placeholder=" type here" />
<div id="results"></div>

Answer 1

I have added searching when a user is typing and stop it when the search is done. This will help you when you will use ajax request which will take time to pull data from server. When no result match then it gives No data. Check out the output.

var user = document.getElementById('user');
var results = document.getElementById('results');

$('#user').keydown(function() {
  results.innerHTML = 'Searching...';
});


$('#user').keyup(function() {
  search(user.value);
});

var apples = {
  firstName: "apples",
  stock: "in stock"
};

var bananas = {
  firstName: "bananas",
  stock: " not in stock"
};

var contacts = [apples, bananas];

function printPerson(person) {
  results.innerHTML = (person.firstName + " are " + person.stock);
}

function list() {
  var contactsLength = contacts.length;
  for (var i = 0; i < contactsLength; i++) {
    printPerson(contacts[i]);
  }
}


function search(match) {
  var contactsLength = contacts.length;
  var hasAnyMatch = false;
  for (var i = 0; i < contactsLength; i++) {
    if (contacts[i].firstName == match) {
      printPerson(contacts[i]);
      hasAnyMatch = true;
    }
  }

  if(!hasAnyMatch){
    results.innerHTML = 'No data';
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="user" placeholder=" type here" />
<div id="results"></div>