放开键时删除了JQuery keydown事件更改答案

【问题标题】：JQuery keydown event changes removed when letting go of key放开键时删除了JQuery keydown事件更改
【发布时间】：2012-12-25 21:45:21
【问题描述】：

我正在尝试创建一个自动建议框。当用户开始在#tagSelection 输入字段中输入内容时，JQuery 通过 Ajax 从数据库中获取建议并将这些建议显示在 #suggestBox div 中，该 div 显示在 #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');
            }
        }
    }
}

【问题讨论】：

40 是向下键 ascii 码？
'[tagSelected = 1]' 是什么？你的意思是'.tagSelected'？（或者也许你正在使用一种我不知道的技术。）上面的代码看起来不可能删除类。检查其他地方的其他事件处理钩子。

标签： jquery events time keydown short

【解决方案1】：

如果我没听错的话，在这种情况下，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
});

【讨论】：

我更喜欢这个特定问题的答案。我需要太多的自定义行为才能使用第三方插件，我想自己学习这些东西。
自动完成只是 jquery 的东西。你已经在使用了。

【解决方案2】：

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

【讨论】：

你也会不尊重我吗？我也有同样的答案？

【解决方案3】：

我在这里发现了完全相同的问题：

How to make a permanent change to an element after using jQuery's .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 条件，现在该课程仍然在建议中并且可以正常工作:-)

【讨论】：