0

テキストボックスのすぐ下に動的 div を追加するこのコードがありますが、ユーザーが文字を削除した後に削除したいと思います。

以下のコードは機能しません。何が間違っているのかわかりません

フィドルからのコード

以下のコードを参照してください。

    $(document).ready(function () {

        $("#searchcontent").keypress(function (e) {
            var dvSearch = $('<div />');
            dvSearch.attr('dvSearch', '1');

            if ($("#searchcontent").val().length >= 2) {
                var pos = $(this).position();
                dvSearch.html("<div>ffff:<div><div>eeee:<div><div>ggggg:<div>").css({
                    top: pos.top + $(this).height() + 18,
                    left: pos.left,
                    width: '300px',
                    position: 'absolute',
                    'background-color': 'Yellow'
                }).insertAfter($(this));
            }
            else {
                $("div[dvSearch='1']").remove();
            }
        });

    });
4

4 に答える 4

1

HTML で結果コンテンツを受け取る準備ができているコンテナを用意することをお勧めします。次に、そこに結果を追加するか、そのコンテナーを空にすることで、問題を軽減できます。div元のコードでは、すべてのイベントに継続的に要素を追加していkeypressました。

また、他の人が述べたように、イベントがトリガーされたときに入力の値が正しいことを確認する.keyup()代わりに使用する必要があります。.keypress()

HTML

<input type="text" id="searchcontent" name="searchcontent" class="txtSearch" maxlength="30" />
<div id="searchresult"></div>

JS

$(document).ready(function() {
    $("#searchcontent").keyup(function(e) {
        if ($("#searchcontent").val().length >= 2) {
            var pos = $(this).position();
            $("#searchresult").html("<div>ffff:<div><div>eeee:<div><div>ggggg:<div>");
        }
        else {
            $("#searchresult").empty();
        }
    });
});

jsfiddle

于 2013-02-13T21:18:19.823 に答える
0

常にhtmlのセレクターを実行するのは良い方法ではありません。特にグローバル。ノードへのリンクを保存し、それによって削除します

$(document).ready(function () {
   $("#searchcontent").keyup(function (e) {
        var el = $(this),
            // getting link
            dvSearch  = el.data("searchBlock"),
            // getting passed state
            dvPassed = el.data("searchPassed"),
            pos;

        // setting if first run
        if (!dvSearch) {
            dvSearch = $("<div/>");
            // for what is it ?
            dvSearch.attr('dvSearch', '1'); 

            el.data("searchBlock", dvSearch);
            el.data("searchPassed", false);
        }




        if (el.val().length >= 2) {
            pos = el.position();

            // Inserting element if need
            if (!dvPassed) {
                dvSearch.insertAfter(el);
                el.data("searchPassed", true);
            }

            // setting html
            dvSearch.html("<div>ffff:<div><div>eeee:<div><div>ggggg:<div>").css({
                top: pos.top + el.height() + 18,
                left: pos.left,
                width: '300px',
                position: 'absolute',
                'background-color': 'Yellow'
            });
        }
        else {
            dvSearch.remove();
            el.data("searchPassed", false);
        }
    });

});
于 2013-02-13T21:09:01.667 に答える
0

問題は、実際の値が更新される前に keypress が実行されることです。そのため、テキスト ボックスに「hi」と表示されているときにバックスペースを押しても、select の値は「hi」のままです。

アルター

$("#searchcontent").keypress(function(e){

に

$("#searchcontent").keyup(function(e){

そしてそれは問題を解決します。

更新された JS フィドル

于 2013-02-13T21:07:28.073 に答える
0

問題は、バックスペースが押されたときに .keypress() が起動しないことです。代わりに .keyup() を使用してください。

于 2013-02-13T21:08:01.233 に答える