Промените в събитието за натискане на клавиши в JQuery бяха премахнати при пускане на клавиша

Опитвам се да създам кутия за автоматично предлагане. Когато потребителят започне да въвежда в полето за въвеждане #tagSelection, JQuery извлича предложения от базата данни чрез Ajax и ги показва в #suggestBox div, което се показва точно под полето #tagSelection.

Сега искам да дам възможност на потребителя да използва клавиша със стрелка надолу, за да избере едно от предложенията. Започнах да изграждам това, като обработих събитието keydown() и присвоих клас на първия запис по време на това събитие. Проблемът, с който се сблъсквам, е, че класът се премахва отново, когато пусна клавиша със стрелка надолу. Имам нужда да остане зададен, когато пусна ключа. Това възможно ли е?

HTML

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

    <div id="suggestBox" style="">
        <a href="/bg#" id="1">design</a>
        <a href="/bg#" id="3">debit card</a>
        <a href="/bg#" id="4">deer</a>
    &nbsp;
    <a href="/bg#" 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 autocomplete е достатъчно в този случай. опитайте това ДЕМО

<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
autocomplete е просто нещо на 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

Намерих абсолютно същия проблем тук:

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

Изглежда, че наистина имах някакъв друг JQuery код, който пречеше на моя манипулатор на събития. Всеки път, когато някой пусне ключ, когато в полето #tagSelection се задейства JQuery метод, който извлича предложенията от db. Вече съществуващото събитие 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