使用箭头键的 Ajax 下拉选择答案

【问题标题】：Ajax dropdown selection using arrow key使用箭头键的 Ajax 下拉选择
【发布时间】：2014-06-30 15:50:33
【问题描述】：

我创建了一个 ajax 下拉列表，当我按下向下箭头和向上箭头键时，我需要更改下拉值的背景颜色。这里当我按下键时背景会发生变化，它会立即消失。它在ajax 下拉菜单，如果我在设置类 selectedhash 之前放置并发出警报，则它正在工作，否则它不起作用。

这里的 div 将由带有列表的 ajax 结果更新。

请帮我解决这个问题。

  <div class='textautocomplete'>
  </div>


 $(document).on("keydown", function(e) { 
 if (e.keyCode == 40) 
 { 
 if(chosen === "")  
 {
 chosen = 0;

 } else if((chosen+1) < $('.textautocomplete ul').length) 
 {
 chosen++; 
 }
 $('.textautocomplete ul').removeClass('selectedhash');
 $('.textautocomplete ul:eq('+chosen+')').addClass('selectedhash');

 return false;
 }
 if (e.keyCode == 38) { 
 if(chosen === "") {
 chosen = 0;
 } else if(chosen > 0) {
 chosen--;            
 }
 $('.textautocomplete ul').removeClass('selectedhash');
 $('.textautocomplete ul:eq('+chosen+')').addClass('selectedhash');
 return false;
 }
 });


  $(".textinput").live("keyup",function(e)
  {
  $.post('/users/getusers',{data:dataString},function(result){
  if(result!=='') 
  {
  $('.textautocomplete').show();
  $('.textautocomplete').html(result);
  }
  else
  {
  $('.textautocomplete').hide();
  $('.textautocomplete').html('');
  }
  });
  return false
  });

【问题讨论】：

请设置一个小提琴 - jsfiddle.net

标签： javascript php jquery

【解决方案1】：

首先将：“.live”改为：“.on”行：

$(".textinput").live("keyup",function(e)

因为：

"As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live()."

更多：jQuery .live() method

在下面添加keyCode过滤代码：

$(".textinput")

例如：

if ( e . keyCode == 38  || e . keyCode == 40 ) { return false; }

工作示例小提琴：JSFiddle

【讨论】：

谢谢...会检查一下