如何在建議中導航時使用鍵盤上下鍵在文本框中停止導航

Question

我有一個文本框，其中單擊或類型的單詞用戶會看到一些建議，問題是建議可見並導航到使用了文本框內/下鍵建議也是它的導航

下面是代碼：

<label>when</label> 
         <div class="fl"> 
          <input class="date-field startdate cornerall" type="text"/> 
          <div class="input-wrapper"> 
          <input type="text" class="starttime cornerall" placeholder="Add a Time?"/> 
          <div class="dropdown stsugstn hidden"> 
          <ul class="result cornerall"> 
           <li class="sugactive">11.05</li> 
           <li>11.05</li> 
           <li>11.05</li> 
           <li>11.05</li> 
           <li>11.05</li> 
          </ul> 
          </div> 
          </div> 
          <a href="#" class="timezone title-tip" title="IST">GMT+5:30</a> 
          <a href="#" class="endtimeln">End Time?</a>    
         </div> 

各自的jQuery：

$('.cnewrap').on({ 
     keyup: function(e){ 
      var $this = $(this); 
      var $vl = $this.val(); 
      var $st = $this.parent().find('.stsugstn'); 
      var key = (e.keyCode ? e.keyCode : e.which); 
      if($vl != null && $vl.length > 0){ 
       if($st.hasClass("hidden")){ 
        $st.removeClass('hidden'); 
       } 
       if (key === 38 || key === 40){ 
        //TODO write code to stop navigation inside text box 
        //$this.val($vl); 
       } 
      }else{ 
       if(!$st.hasClass("hidden")){ 
        $st.addClass('hidden'); 
       } 

      } 
     }, 
     click: function(e){ 
      var $this = $(this); 
      var $vl = $this.val(); 
      var $st = $this.parent().find('.stsugstn'); 
      if($vl != null && $vl.length > 0 && $st.hasClass("hidden")){ 
       $st.removeClass('hidden'); 
      } 

     } 
    },'.starttime'); 

的jQuery的導航建議之間igating：

$(window).on('keyup', function(e){ 
     var $stsugstn = $('.stsugstn'); 
     var $etsugstn = $('.etsugstn'); 
     var $next = ''; 
     var key = (e.keyCode ? e.keyCode : e.which); 
     if($stsugstn!= null && $stsugstn.length > 0 && !$stsugstn.hasClass("hidden")){ 
      var $current = $('.stsugstn ul li.sugactive'); 
      if (key === 38){ 
       if($current.is(':first-child')){ 
        $next = $('.stsugstn ul li:last-child'); 
       }else{ 

        $next = $current.prev(); 
       } 
      } 
      if (key === 40){ 
       if($current.is(':last-child')){ 
        $next = $('.stsugstn ul li:first-child'); 
       }else{ 
        $next = $current.next(); 
       } 
      } 

      if ($next.length > 0) { 
       $current.removeClass('sugactive'); 
       $next.addClass('sugactive'); 
      } 
     } 
     if($etsugstn!= null && $etsugstn.length > 0 && !$etsugstn.hasClass("hidden")){ 
      var $current = $('.etsugstn ul li.sugactive'); 
      if (key === 38){ 
       if($current.is(':first-child')){ 
        $next = $('.etsugstn ul li:last-child'); 
       }else{ 

        $next = $current.prev(); 
       } 
      } 
      if (key === 40){ 
       if($current.is(':last-child')){ 
        $next = $('.etsugstn ul li:first-child'); 
       }else{ 
        $next = $current.next(); 
       } 
      } 

      if ($next.length > 0) { 
       $current.removeClass('sugactive'); 
       $next.addClass('sugactive'); 
      } 
     } 
    }); 

請建議我如何能阻止內部文本框進行導航，同時使用上/下鍵 導航內的建議作爲建議的jsfiddle， 這裏是鏈接 http://jsfiddle.net/Brg9t/

Answer 1

觸發事件在​​中，這是因爲瀏覽器行爲已在keyup中完成，因此當時preventDefault或return false都不會工作。

因此，將keyup更改爲​​，並在// todo部分添加return false即可。 在這裏看到提琴http://jsfiddle.net/Brg9t/1/。