Browser compatibility with Firefox and IE keycode

Question

I got this Jquery code for an autosuggest search and the keycode for up and down arrows works great for chrome and safari, however when I click the arrows on firefox or IE there is no response. I looked around and I tried using charCode and even added a variable for "keyCode" which is e.which or e.keyCode. Still nothing happens.

(function($){
$.fn.fsearch = function(){
var $searchInput = $(this);
$searchInput.after('<div id="divResult"></div>');
$resultDiv = $('#divResult');
$searchInput.focus();
$searchInput.addClass('searchi');
$resultDiv.html("<ul></ul>");
$searchInput.keyup(function(e) {
var q=$(this).val();
var keyCode = (window.event) ? e.which : e.keyCode;
if(q != '')
{ 
  var current_index = $('.selected').index(),
  $options = $resultDiv.find('.option'),
  items_total = $options.length;

  // When Down Arrow key is pressed
  if (keyCode == 40) {
      if (current_index + 1 < items_total) {
          current_index++;
          change_selection($options,current_index);
      }
  }


  // When Up Arrow is pressed
  else if (keyCode == 38) {
      if (current_index > 0) {
          current_index--;
          change_selection($options,current_index);
      }
  }

  // When enter key is pressed
  else if(keyCode == 13){
    var id = $resultDiv.find('ul li.selected').attr('id');
    var name = $resultDiv.find('ul li.selected').find('.name').text();
    window.location = "event.listing.php?id="+id;
  }
  else{
  $resultDiv.fadeIn();

  // Query search details from database
  $.getJSON("json.php",{searchword: q},function(jsonResult)
  { 
    var str='';
    for(var i=0; i<jsonResult.length;i++)
      {
        str += '<li id=' + jsonResult[i].id + ' class="option"><img class="profile_image" src="data:image/jpg;base64,'+jsonResult[i].photo+'" alt="'+jsonResult[i].fullName+'"/><span class="name">' + jsonResult[i].fullName + '</span><br /><span class="name" style="font-size:10px; color:#999;">'+jsonResult[i].tel+'</span></li>';
      }
      $resultDiv.find('ul').empty().prepend(str);
      $resultDiv.find('ul li').first().addClass('selected');
  }); 

    $resultDiv.find('ul li').live('mouseover',function(e){
    current_index = $resultDiv.find('ul li').index(this);
    $options = $resultDiv.find('.option');
    change_selection($options,current_index);
  });

  // Change selected element style by adding a css class
  function change_selection($options,current_index){
    $options.removeClass('selected');
    $options.eq(current_index).addClass('selected');
    }
  }
}
    else{
  //Hide the results if there is no search input
  $resultDiv.hide();
   }
   });    

   // Hide the search result when clicked outside
     jQuery(document).live("click", function(e) { 
     var $clicked = $(e.target);
     if ($clicked.hasClass("searchi") || $clicked.hasClass("searchf")){
     }
     else{
     $resultDiv.fadeOut(); 
     }
     });

     // Show previous search results when the search box is clicked
     $searchInput.click(function(){
       var q=$(this).val();
       if(q != '')
      { 
       $resultDiv.fadeIn();
       }
       });

       // Select the element when it is clicked
        $resultDiv.find('li').live("click",function(e){ 
        var id = $(this).attr('id');
        var name = ($(this).find('.name').text());
        window.location = "event.listing.php?id="+id;
        });

        };
      })(jQuery);

Answer 1

You have jQuery tagged, so you should only be using event.which:

The event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.

var keyCode = e.which;