帶搜索框的jQuery關鍵事件

我正在使用jQuery創建一個autosuggest插件，並且我想添加Keypress事件，以便用戶可以向下和向上瀏覽。此外，如果他們按下輸入，它會將值添加到輸入。帶搜索框的jQuery關鍵事件

這是我的HTML是什麼樣子：

<input id="myInput" class="textInput" type="text" name="instructorName"/> 
    <label for="search"> </label> 
     <div id="myInputResults" class="results" style="display: block;"> 
      <ul> 
      <li><a><div class="suggClass">Suggestion #1</div></a></li> 
      <li><a><div class="suggClass">Suggestion #2</div></a></li> 
      <li><a><div class="suggClass">Suggestion #3</div></a></li> 
      <li><a><div class="suggClass">Suggestion #4</div></a></li> 
      </ul> 
     </div>

到目前爲止，我有這樣的事情：

$("#myInput").keyup(function (e) { 

    var code = (e.keyCode ? e.keyCode : e.which); 

    if (code == 40) {    //If user "keys down" 

       //I would want to addClass 'hovered' to the "first <li>" 
      // Remove 'hovered' class from any other <li>'s 

     } 


    });

到現在爲止，我沒有在正確的邏輯很肯定以便用戶可以上下滾動，然後按「輸入」選擇項目。

任何建議和幫助，將不勝感激！謝謝。

來源

2009-10-17 Dodinas

添加到Psytronic的代碼，這應該涵蓋「中輸入」懸停類只有一個元素是keycode以及...

$(function(){ 
    $("#myInput").keyup(function (e) { 
     var code = (e.keyCode ? e.keyCode : e.which); 

     if (code == 40) { 
      if($("li.hovered").length == 0){ 
       $("#myInputResults li").eq(0).addClass("hovered"); 
      }else{ 
       $("li.hovered").eq(0).removeClass("hovered").next().addClass("hovered"); 
      } 
     }; 

     if(code == 13) { 
      if($("li.hovered").length > 0){ 
       $("#myInput").val($("li.hovered").eq(0).find("div.suggClass").eq(0).text()); 
      } 
     } 
    }); 
});

來源

2009-10-17 21:19:32 WesleyJohnson

這讓我走上了正軌。謝謝。 – Dodinas 2009-10-17 22:20:50

但我想，隨後你想要第二個「向下按」突出第二個，並從第一個刪除？等等等等..

 
if(!$("li.hovered")){ //if no li has the hovered class 
    $("#myInputResults li").eq(0).addClass("hovered"); 
}else{ 
    $("li.hovered").eq(0).removeClass("hovered").next().addClass("hovered"); 
}

這是工作，前提是有隨時

來源

2009-10-17 20:40:59 Psytronic

+1對於輔助答案。謝謝。 – Dodinas 2009-10-17 22:20:14

帶搜索框的jQuery關鍵事件

回答

相關問題