JQuery - Befestigen Sie die EINGABETASTE KeyPress-Ereignis-Liste posten

Ich Schreibe meine eigene autocomplete plugin mit jquery. Die Elemente der Liste gezogen werden dynamisch auf Basis der json-Antwort. Ich habe up/down-Taste code, die gut funktioniert auf keyup-Ereignis ausgelöst, auf das Eingabefeld.

Möchte ich hinzufügen, geben Sie ein Schlüssel-Ereignis zu jedem Punkt der Liste. Also, wenn der Benutzer die Navigation durch die AutoVervollständigen-dropdown mit den up/down-Pfeil-Tasten, enter-Taste drücken Sie auf Ereignis hinzufügen würde, den Wert, die Liste Element, um das Eingabefeld.

Kann mir bitte jemand helfen? Ich habe versucht verbindlichen Veranstaltung des Listenelements 

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
        }
    });
}
  • Ich Schreibe eine autocomplete plugin für jQuery als gut. Wenn Sie nicht zu weit in Ihrem Projekt, check it out.
InformationsquelleAutor techlead | 2011-06-20
  1. 1

    Etwas wie dieses:

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

    Erweitern Sie Ihren Kommentar hier ein jfiddle http://jsfiddle.net/csLVX/5/: {Aufräumen mein code ein bisschen!}

        <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
    } 
});
    • Danke! live() gearbeitet, ABER es gibt ein problem. Dies ist, was ich Tue: $("input."+id).live("keyup",function(e){ if (- e.keyCode == 40) { // nach unten-Taste code } if (- e.keyCode == 38) { // up-Taste code } if (- e.keyCode == 13) { // Eingabe-Taste code } }); Enter-Taste funktioniert, aber es gibt immer den Wert des ersten Listenelements. Ich will schnappen Sie sich den Wert des Listenelements, hervorgehoben durch den Pfeil up/down Taste und legen Sie den Wert in das Eingabefeld ein. Der Pfeil-oben/nach-unten-Taste funktioniert nicht, wenn ich live("keyup") mit $("li")
    • O jetzt sehe ich, Sie haben eine Liste und wollen, dass der up-und down-Pfeil, um die Rückkehr der Werte des Li in das INPUT-tag,... ich werde ein Turnschuh
    • kein problem, Sie müssen auch sicherstellen, dass Sie wählen Sie eine Antwort aus 🙂
    • Sorry, aber ich bin neu auf dieser Seite. Wie wähle ich eine Antwort?
    • an der Spitze einer Antwort gibt es ein oben und unten-dies wird verwendet, um Punkte oder Gutschrift auf/versucht, eine Antwort jedoch, um die richtige Antwort auswählen, unten die Punkte Kontrollkästchen neben jeder Antwort haben, werden Sie ausgeblendet Zecke gedrückt, wechselt auf grün.
    InformationsquelleAutor John
  2. 2

    Können Sie nicht nur binden, weil die Elemente der Liste sind nicht in den DOM, wenn Sie sich, dass javascript ausgewertet wird.

    Blick in die Verwendung von jQuery.live() http://api.jquery.com/live/

    Wenn Sie <div id='autocomplete'><li>...</li></div> dann könnten Sie rufen Sie die live-Events wie:

    $("#autocomplete li").live("keyup", function(e) {
    if (e.keyCode == 40)
        //Add to the input field
});
    • sorry, aber ich wusste nicht kopieren Sie Ihre Antwort.
    • Dies ist, was ich getan habe: $("input."+id).live("keyup",function(e){ if (- e.keyCode == 40) { // nach unten-Taste code } if (- e.keyCode == 38) { // up-Taste code } });
    InformationsquelleAutor Nick Radford
  3. 0

    Die Sie wahrscheinlich verwenden wollen live() eher als bind() so, dass es funktioniert, auch wenn Ihr li's werden dynamisch geladen.

    Die docs sind hier

    Ich würde auch hinzufügen, eine bestimmte Klasse für die li's, so können Sie einen Selektor wie:

    $('.my_loaded_selection').live('keyup', function(e){//do your thing
}) ;
    InformationsquelleAutor NullRef
  4. 0
    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';
}
    • Als Sie nur Ihre Postleitzahl, und keine Erklärung, würde der Geist Sie übersetzen die Kommentare, da dies eine englische Seite?
    InformationsquelleAutor user3472489
Schreibe einen Kommentar