Изменения события нажатия клавиши JQuery удалены при отпускании клавиши

Я пытаюсь создать окно автопредложения. Когда пользователь начинает вводить текст в поле ввода #tagSelection, JQuery извлекает предложения из базы данных через Ajax и отображает их в div #suggestBox, который отображается прямо под полем #tagSelection.

Теперь я хочу, чтобы пользователь мог использовать клавишу со стрелкой вниз для выбора одного из предложений. Я начал строить это, обрабатывая событие keydown() и назначая класс первой записи во время этого события. Проблема, с которой я столкнулся, заключается в том, что класс снова удаляется, когда я отпускаю клавишу со стрелкой вниз. Мне нужно, чтобы он оставался назначенным, когда я отпускаю ключ. Это возможно?

HTML

<div class="form-entry">
    <input id="tagSelection" name="tags" type="text" value="" size="40">

    <div id="suggestBox" style="">
        <a href="#" id="1">design</a>
        <a href="#" id="3">debit card</a>
        <a href="#" id="4">deer</a>
    &nbsp;
    <a href="#" id="addTag">Add word</a>

    <div id="selectedTags"></div>

</div>

JQuery

(function() {
    $('#tagSelection').keydown(downArrowKeyHandler);
})();

function downArrowKeyHandler(event) {
    if (event.keyCode == 40) {
        if ($('#suggestBox').length > 0) {
            if ($('[tagSelected = 1]').length == 0) {
                // the tagSelected class gives the entry a colored background
                $('#suggestBox').children().filter(':first').addClass('tagSelected');
            }
        }
    }
}

events jquery time keydown short
person Julius    schedule 25.12.2012    source источник
comment
40 - это ascii-код вниз?   -  person Muhammad Talha Akbar    schedule 25.12.2012
comment
Что такое '[tagSelected = 1]'? Вы имеете в виду '.tagSelected'? (Или, может быть, вы используете технику, о которой я не знаю.) Вышеприведенный код не выглядит так, как будто он может удалять классы; проверьте в другом месте другие хуки обработки событий.   -  person slackwing    schedule 25.12.2012

Ответы (3)


arrow_upward
1
arrow_downward

Если я правильно понял, в этом случае достаточно автозаполнения Jquery. попробуйте эту DEMO

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input class="ui-widget ui-widget-content ui-corner-all" id="tags">
</div>

$( "#tags" ).autocomplete({
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ],
    delay: 0
});
person Ashwini Verma    schedule 25.12.2012
comment
Я бы предпочел ответ на этот конкретный вопрос. Мне нужно слишком много пользовательского поведения, чтобы работать со сторонним плагином, и я хочу изучить этот материал сам. - person Julius; 25.12.2012
comment
автозаполнение - это просто jquery. который вы уже используете. - person Ashwini Verma; 25.12.2012

arrow_upward
1
arrow_downward

JS-КОД:

$("input").keypress( function() {
var s = $(this).val();
$.ajax({
other params
success: function(data) { // here data contains all the suggest echoed with comma seprated (see below)
var s = data.split(",");
$(this).autocomplete({
    source: s,
    delay: 0
});
});
});

В PHP это должно отображаться вот так

siren,sam,sami,salman
person Muhammad Talha Akbar    schedule 25.12.2012
comment
ну ты тоже будешь не уважать меня? у меня такой же ответ? - person Muhammad Talha Akbar; 25.12.2012

arrow_upward
0
arrow_downward

Я нашел точно такую ​​же проблему здесь:

Как внести постоянные изменения в элемент после использования jQuery .keydown()?

Кажется, у меня действительно был какой-то другой код JQuery, который мешал моему обработчику событий. Всякий раз, когда кто-то отпускает ключ, когда в поле #tagSelection срабатывает метод JQuery, который извлекает предложения из базы данных. Уже существующее событие keyup() мешало моему новому событию keydown().

(function() {
    $('#tagSelection').keyup(tagboxTypingHandler)
})();


function tagboxTypingHandler(event) {
    if (event.keyCode != 40) {
        var substring = $('#tagSelection').val();
        if (substring.length > 1) {
            $.get("http://localhost:8080/tag/search/" + substring, returnedTagsHandler);
        }
    }
}

Я только что добавил условие event.keyCode != 40, и теперь класс остается на предложении, и он работает :-)

person Julius    schedule 25.12.2012