JQuery - Присоединение события Enter KeyPress к элементам списка

Question

Я пишу свой собственный плагин автозаполнения с помощью jquery. Элементы списка отрисовываются динамически на основе ответа json. У меня есть код клавиши со стрелкой вверх / вниз, который хорошо работает при событии keyup, запущенном в поле ввода.

Я хочу добавить событие ввода ключа к каждому элементу списка. Таким образом, когда пользователь перемещается по выпадающему меню автозаполнения с помощью клавиш со стрелками вверх / вниз, событие нажатия клавиши ввода добавит значение этого элемента списка в поле ввода.

Может кто-нибудь помочь, пожалуйста? Я пытался привязать событие к элементу списка

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

Вы не можете использовать просто связывание, потому что элементы списка не находятся в DOM, когда этот javascript оценивается.

Рассмотрите использование 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 2

Примерно так:

$("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 3

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';
}

Answer 4

Возможно, вы захотите использовать live() вместо bind(), чтобы он работал, даже если ваши li загружаются динамически.

Документы здесь

Я бы также добавил определенный класс к li, чтобы вы могли использовать селектор, например:

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