title: jquery pressing arrow keys to select option
body: <p>Okay guys , so I have this algorithm that selects an option based on the keys that you press(up or down arrows).</p>
  
  <pre><code>var nr = 0;
      $(function(){
          $('#searchbox').keyup(function(e){
              var total = $('#suggest'+nr).attr("total");
              var code = (e.keyCode ? e.keyCode : e.which);
              if ( up(code) == 1 )
              {
                  if (nr == 0)
                  {
                          $('#suggest'+total).addClass('hlight');
                  }
              }
              else
                  if ( down(code) == 1 )
                  {
                      $('#suggest'+nr).css({'background':'red'});;    
                  }
          });
  
      });
  </code></pre>
  
  <p>But the problem is that every time I release the respective div gets selected for like a fraction of a second by changing his background color and then get back to the original background color.</p>
  
  <p>How do I make it highlight the div and the css to remain applied ?
  Thank you.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div id="search"&gt;
                  &lt;form action="home.php" method="get" name="search"&gt;
                     &lt;input type="text" id="searchbox" name="srch" size="60" value="Search..." onFocus="if(this.value == 'Search...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search...';}" /&gt;
                     &lt;input type='hidden' name='q' value='&lt;?php echo $q; ?&gt;' /&gt;
                     &lt;input type='hidden' name='page' value='1' /&gt;
                    &lt;button type="submit" id="searchb"&gt;&lt;img src="pics/lens1.jpg" alt="Submit"&gt;&lt;/button&gt;
                  &lt;/form&gt;
  
                  &lt;/div&gt;&lt;!--end search--&gt;
  </code></pre>
  
  <p>PHP :</p>
  
  <pre><code>echo "&lt;p class='suggestion' id=".$char." total=".($total-1)." style='color:black;font-size:13px;margin-bottom: 7px;'&gt;".$id.",".$strg."&lt;/p&gt;";
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style &gt;
  .hlight{
      background:yellow;
  }
  ​
  
  &lt;/style&gt;
  </code></pre>