0

自動提案ボックスを作成しようとしています。ユーザーが #tagSelection 入力フィールドに入力を開始すると、JQuery は Ajax を介してデータベースから候補を取得し、#tagSelection フィールドのすぐ下に表示される #suggestBox div に表示します。

ここで、ユーザーが下矢印キーを使用して候補の 1 つを選択できるようにしたいと考えています。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');
            }
        }
    }
}
4

3 に答える 3

1

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
于 2012-12-25T13:45:19.360 に答える
1

正解すれば、この場合は Jquery オートコンプリートで十分です。このデモを試す

<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
});
于 2012-12-25T13:35:03.297 に答える
0

ここでまったく同じ問題を見つけました：

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 条件を追加したところ、クラスは提案のままになり、機能します:-)

于 2012-12-25T13:45:21.413 に答える