title: autocomplete textbox with normal concepts javascript
body: <p>I am trying to implement a textbox autocomplete 
  and here is the code </p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;div class="sug"&gt;
      &lt;input type="text" id="auto" onkeyup="display(event)" onblur="hide()" autocomplete="off"/&gt;
  
      &lt;div class="suggestion" id="suggestion"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre><code>.suggestion {
      border: solid 2px black;
  }
  
  .sug &gt; .suggestion {
      display: none;
  }
  
  .sug &gt; .suggestion, #auto {
      width: 100px;
  }
  </code></pre>
  
  <h3>JavaScript</h3>
  
  <pre><code>var array = new Array();
  array.push("heena");
  array.push("bhawin");
  array.push("aruna");
  array.push("mahesh");
  array.push("anshul");
  array.push("jagruti");
  array.push("neha");
  array.push("sherry");
  array.push("sonali");
  var data;
  var id;//for providing id to each div
  function display(e) {
      if (e.keyCode == 38 || e.keyCode == 40) {
          selectit(e);
      }
      data = "";
      id = 0;
      var state = $('#auto').val();
      if (state == "")//value empty
      {
          $('.suggestion').css({display: "none"});
      }
      else {
          for (var i = 0; i &lt; array.length; i++) {
              var key = 0;
              for (j = 0; j &lt; state.length; j++) {
                  //for the matching of the array element with the text in the textbox
                  if (array[i][j] == state[j]) {
                      key++;
                  }
              }
              //putting the matched array element in a div
              if (key == state.length) {
                  //the whole array will be copied with the bold values inserted
                  var bolde = "";
                  for (var k = 0; k &lt; key; k++) {
                      bolde += "&lt;b&gt;" + array[i][k] + "&lt;/b&gt;";
                  }
                  for (var l = key; l &lt; array[i].length; l++) {
                      bolde += array[i][l];
                  }
                  id++;
                  data += "&lt;div id='" + id + "'&gt;" + bolde + "&lt;/div&gt;";
              }
          }
          $('.suggestion').html(data);
          $('.suggestion').css({display: "block"});
          if (data == "") {
              $('.suggestion').css({display: "none"});
          }
      }
  }
  function hide() {
      $('#suggestion').css({display: "none"});
      ;
  }
  function selectit(e) {
      var child = document.getElementById("suggestion").childNodes;
      for (var i = 0; i &lt; child.length; i++) {
          if (child[i].id == "1") {
              child[i].style.color = "red";   //here is the problem in the code
          }
      }
  }
  </code></pre>
  
  <p>In the code I want to make the first suggestion color red on down key press
  but the color is not showing</p>
  
  <p>The  last comment is the region where the problem is.</p>