title: Showing suggestion box when typing in input box
body: <p>I'm trying to get some sort of suggestion box in my application. The basic idea is that, when typing in an input box, 5 options show up below the input box with possible entries.</p>
  
  <p>The problem I am facing is that, while there is nothing entered in the input box, the box which gives the possible suggestions already shows (see <a href="http://i.stack.imgur.com/bbreg.png" rel="nofollow">Screenshot</a>). Of course, I only want it to show up when I enter something in the input box.</p>
  
  <p>Any help?</p>
  
  <p>Wout</p>
  
  <p>CSS-code:</p>
  
  <pre><code>#suggestions {
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border: 1px solid black;
      position: absolute;
      left: 310px;
      top: 5px;
      background-color: white;
      font-size: 12px;
  }
  </code></pre>
  
  <p>JavaScript: --> option1, option2,... get a value in function "giveSuggestion()"</p>
  
  <pre><code>&lt;form id = "suggestions"&gt;
      &lt;input     type = "text" 
                 id = "insertText" 
                 autocomplete="off" 
                 onkeyup = "if (event.keyCode == 13) {SearchAddress(option1.text)}
                            else {giveSuggestion()}"/&gt;
      &lt;option id = "option1" onclick = "searchAddress(option1.text)"&gt;&lt;/option&gt;
      &lt;option id = "option2" onclick = "searchAddress(option2.text)"&gt;&lt;/option&gt;
      &lt;option id = "option3" onclick = "searchAddress(option3.text)"&gt;&lt;/option&gt;
      &lt;option id = "option4" onclick = "searchAddress(option4.text)"&gt;&lt;/option&gt;
      &lt;option id = "option5" onclick = "searchAddress(option5.text)"&gt;&lt;/option&gt;
  &lt;/form&gt;
  </code></pre>