creativecoder creativecoder - 3 months ago 18
Javascript Question

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

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.

and i'd 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:

<input type="text" id="user" placeholder=" type here"/>


<div id="results">
</div>


.

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]);
}

}

}

Answer

You can use .onkeydown() in order to output 'no results' as soon as the user enters a string. Once the string has been found in your collection of items the message will be overwritten with your message.

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

$('#user').keydown(function() {
  results.innerHTML = 'no 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>

An other would be to simply add an else statement inside the for() loop in search()

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]);
    } else {
      results.innerHTML = 'no results';
    }
  }

}
<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>

Comments