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 回答