Find mobile phone contact according to number typed I am using the code below trying to replicate the mobile phone feature that displays one or more contact names according to the numbers typed.

This code is intended to be used on a JavaScript course I am teaching, so I try to keep it as simple as possible in order to walk the students through a possible scenario and the required steps to implement a solution programmatically.

I would like to hear any suggestions for changes or comments before moving this example to class.

Thank you very much!

(You can find the full code, along with some pretty styling at this codepen link)  

HTML:

&lt;div class="tryout"&gt;
  &lt;p&gt;Numbers to try:&lt;/p&gt;
  &lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class="mobile"&gt;
  &lt;label for="number"&gt;Send SMS&lt;/label&gt;
  &lt;input type="text" id="number" name="number" placeholder="Enter telephone number"&gt;  
&lt;/div&gt;

&lt;div class="found"&gt;&lt;/div&gt;


JAVASCRIPT:

const contacts = {
  kostas: 6986100100,
  maria: 6986100200,
  george: 6986300300,
  sofia: 6986300400,
  chris: 6987500500,
  marina: 6944600600
}

const input = document.querySelector("#number");
const found = document.querySelector(".found");

input.addEventListener( "keyup", handleKeyUp );

function handleKeyUp( e ){

  found.innerHTML = "";

  Object.entries(contacts).map((contact)=&gt;{

    let [ key, value ] = contact;
    let inputValue = e.target.value;
    value = String( value );
    if ( value.indexOf( inputValue ) === 0 ){
      found.innerHTML += `
        &lt;p id="${key}"&gt;
          &lt;strong&gt;${key}&lt;/strong&gt;: 
          ${value.replace( inputValue, `&lt;span&gt;${ inputValue }&lt;/span&gt;` )}
        &lt;/p&gt;
      `;

    }

  })
}


NOTES: Since this is intended for an audience of beginners, best practices, code organization and probably performance considerations are of great importance here.
Here's a few suggestions:

I would model the contacts list as an array of objects, like this:

const contacts = [
  { name: 'kostas', number: '6986100100' },
  { name: 'maria', number: '6986100200' },
  { name: 'george', number: '6986300300' },
  { name: 'sofia', number: '6986300400' },
  { name: 'chris', number: '6987500500' },
  { name: 'marine', number: '6944600600' }
];


If you use your contacts' first name as object keys, you can't have two contacts with the same name. Moreover, if each contact is represented by an object, you can add additional information to the contact in the future. I would also write the phone numbers as a string, not a number, since phone numbers can contain non-digit characters (like '+') or leading zeros.

The search returns a list of corresponding contacts, so you might as well replace the results div with a list, a &lt;ul class="found"&gt;&lt;/ul&gt; for example.

Searching for and displaying the matches becomes easy now:

function handleKeyUp(e) {
  const inputValue = e.target.value.trim();

  if (inputValue) {
    found.innerHTML = contacts
      .filter(contact =&gt; contact.number.startsWith(inputValue))
      .map(
        contact =&gt;
          `&lt;li&gt;&lt;strong&gt;${contact.name}&lt;/strong&gt;: ${contact.number.replace(
            inputValue,
            `&lt;span&gt;${inputValue}&lt;/span&gt;`
          )}&lt;/li&gt;`
      )
      .join('');
  } else {
    found.innerHTML = '';
  }
}


No need to convert the input value to a string, it's a string already. Notice how there's only one call to found.innerHTML. Your code updated the dom once for each found match, but dom operations are expensive and should be minimized.