JQuery - 附加輸入KeyPress事件列出項目

Question

我正在用jquery編寫自己的自動填充插件。列表項是根據json響應動態繪製的。我有向上/向下箭頭鍵代碼，在輸入字段上觸發的按鍵事件上運行良好。

我想爲每個列表項添加一個回車鍵事件。因此，當用戶使用向上/向下箭頭鍵瀏覽自動完成下拉菜單時，輸入按鍵事件會將該列表項的值添加到輸入字段。

有人可以幫忙嗎？我嘗試過將綁定事件添加到列表項中

if (e.keyCode == 40){ 
    // highlight the list item 
    $("li").bind("keyup",function(e){ 
     if (e.keyCode == 13){ 
      // add value of list item to input field 
     } 
    }); 
} 

Answer 1

事情是這樣的：

$("input").live("keypress", function(keyarg){ 
if(keyarg.keyCode == 13) { //Enter keycode 
    $("WHATEVERELEMENT").append($(this).val()); 
} 
}); 

擴大在你的評論這裏是一個jfiddle http://jsfiddle.net/csLVX/5/：{整理我的代碼一點！}

<ul> 
     <li>ITEM 1</li> 
     <li>ITEM 2</li> 
     <li>ITEM 3</li> 
    </ul> 
    <br /><input/> 



    liPossition = 0; 

$("input").live("keyup",function(e){ 
    if (e.keyCode == 40) { // down arrow key code 
     if (liPossition != $("li").length-1) { 
      liPossition++; 
     } 
     $("input").val($("li:eq("+liPossition+")").text()); 


    } if (e.keyCode == 38) { // up arrow key code   
     if (liPossition == -1) { 
      //if we reach min items do nothing 
      liPossition = 0; 
     } else { 
      liPossition--; 
     } 
     $("input").val($("li:eq("+liPossition+")").text()); 

    } if (e.keyCode == 13) { // enter key code 
    //some code to proceed the form 
    } 
}); 

Answer 2

您不能僅僅使用綁定，因爲當評估該javascript時列表項不在DOM中。

考慮使用jQuery.live（）http://api.jquery.com/live/

如果你有<div id='autocomplete'><li>...</li></div>，那麼你可以調用像現場活動：

$("#autocomplete li").live("keyup", function(e) { 
    if (e.keyCode == 40) 
     // Add to the input field 
}); 

Answer 3

您可能想要使用live()而不是bind()，以便即使在動態加載li時也能正常工作。

The docs are here

我還要補充一個特定的類的li的，所以你可以使用一個選擇，如：

$('.my_loaded_selection').live('keyup', function(e){//do your thing 
}) ; 

Answer 4

countries = ['name1', 'name2']); 

//Номер активного элемента в списке подсказок 
numActiveItem = 0; 


//Количество элементов в списке подсказок 
countItemsListHelp = 0; 

// Создание списка подсказок 
function createHelpList(event) { 
    var event = event || window.event; 
    var key = event.keyCode || event.charCode; 
    var target = event.target || event.srcElement; 
    var len_key_words = target.value.length; 
    var reg = new RegExp("^" + target.value + ".*$", "i"); 
    counter = 0; 

    // Нажат Enter 
    if (key == 13) { 
     document.getElementById("select_list").style.display = 'none'; 
    } 
    /* Перебор подсказок */ 
    else if (key == 40 || key == 38 && countItemsListHelp != 0) { 
     alert(countItemsListHelp); 
     if (key == 40) numActiveItem++; 
     else numActiveItem--; 

     if (numActiveItem > countItemsListHelp) numActiveItem = 1; 
     else if (numActiveItem < 1) numActiveItem = countItemsListHelp; 


     for (i = 0; i < document.getElementById('select_list').childNodes.length; i++) { 
      if (document.getElementById('select_list').childNodes[i].nodeType == 1) { 
       counter++; 
       document.getElementById('select_list').childNodes[i].style.background = '#ffffff'; 
       if (counter == numActiveItem) { 
        document.getElementById('select_list').childNodes[i].style.background = '#fdedaf'; 
        document.getElementById('search_field').value = document.getElementById('select_list').childNodes[i].getElementsByTagName('span')[0].innerHTML; 
       } 
      } 
     } 
    } 
    /* Поиск и вывод подсказок */ 
    else if (len_key_words && key != 37 && key != 39) { 
     numActiveItem = 0; 
     document.getElementById('select_list').style.display = 'none'; 
     code = ''; 
     for (i = 0; i < countries.length; i++) 
      if (reg.exec(countries[i].substr(0, len_key_words)) != null) { 
       code += "<li><span style='display: none;'>" + countries[i] + "</span><strong>" + countries[i].substr(0, len_key_words) + "</strong><span style='color: #b4b3b3'>" + countries[i].substr(len_key_words) + "</span></li>"; 
       counter++; 
      } 
     if (counter) { 
      countItemsListHelp = counter; 
      document.getElementById('select_list').innerHTML = code; 
      document.getElementById('select_list').style.display = 'block'; 
     } 
    } 
    /* Если поле пустое*/ 
    else if (!len_key_words) { 
     document.getElementById('select_list').style.display = 'none'; 
    } 
} 

function selectHelp(ev) { 
    var event = ev || window.event; 
    var target = event.target || event.srcElement; 
    document.getElementById('search_field').value = target.getElementsByTagName('span')[0].innerHTML; 
    document.getElementById('select_list').style.display = 'none'; 
}