3

オートコンプリート機能を使用している入力フィールドがあります。これだけを行うと、オートコンプリートが機能します。しかし:スパンを表示し、ユーザーがクリックしたときに入力ボックスに置き換えたいと思います。残念ながら、オートコンプリート機能が壊れます。次のコードを検討してください。

$(function () {

    $('#my_span').live('click', function () {
        var input = $('<input />', {'type': 'text', 'id': 'my_input', 'name': 'my_input', 'value': $(this).html()});
        $(this).parent().append(input);
        $(this).remove();
        input.focus();
    }


    );

    $('#my_input').live('blur', function () {
        $(this).parent().append($('<span />' , {'id': 'my_span'}).html($(this).val()));
        $(this).remove();
    });
});

$("#my_input").autocomplete({
        source: function(req, resp) {
            $.getJSON("http://localhost/grootjeframework/testproject/json/find/partij/naam/" + encodeURIComponent(req.term), resp);
        },

        select: function(event,ui){
             //do Stuff
        }
    });

(エディターは私の HTML スパンをスパン要素と見なします ;) だから投稿できません。参考までに: ID が「my_span」の通常のスパンです)。

入力とスパンの置き換えは正常に機能します。置換スクリプトなしのオートコンプリートも正常に機能します。しかし、両方を組み合わせると、オートコンプリート機能が壊れます。

4

2 に答える 2

1

「my_input」は「my_span」をクリックしたときにのみ作成されるため、「blur」イベント ハンドラをアタッチしてオートコンプリート プラグインを追加しても、まだ存在しません。

次のようにしてみてください。

$(function () {

$('#my_span').live('click', function () {
    var input = $('<input />', {'type': 'text', 'id': 'my_input', 'name': 'my_input', 'value': $(this).html()});

    input.live('blur', function () {
        $(this).parent().append($('<span />' , {'id': 'my_span'}).html($(this).val()));
        $(this).remove();
    });

    input.autocomplete({
        source: function(req, resp) {
            $.getJSON("http://localhost/grootjeframework/testproject/json/find/partij/naam/" + encodeURIComponent(req.term), resp);
        },

        select: function(event,ui){
             //do Stuff
        }
    }); 

    $(this).parent().append(input);
    $(this).remove();
    input.focus();
});

});

このようにして、作成後に要素にイベントハンドラーとオートコンプリートをアタッチします。

レオンティ

于 2012-11-04T15:37:37.327 に答える
0

Leontiのおかげで、仕事を終えることができました。私は次のようにソリューションを編集しました。これから、JSONアイテムリストのアイテムをクリックした後、入力ボックスがスパンで変更されます。

$(function () {

    $('#my_span').live('click', function () {
        var input = $('<input />', {'type': 'text', 'id': 'my_input', 'name': 'my_input', 'value': $(this).html()});

        input.autocomplete({
            source: function(req, resp) {
                $.getJSON("http://localhost/grootjeframework/testproject/json/find/partij/naam/" + encodeURIComponent(req.term), resp);
            },

            select: function(event,ui){
                $("#id_partij_samengevoegd").attr("value", ui.item.id );
                $('#my_span').remove();
                input.parent().append($('<span />' , {'id': 'my_span'}).html(ui.item.value));
                input.remove();
            }
        });    

        $(this).parent().append(input);
        $(this).remove();
        input.focus();
    });

});
于 2012-11-04T20:53:05.030 に答える