使用jquery&页面准备好后生成输入时ajax自动完成

时间:2016-03-10 23:15:22

标签: jquery ajax autocomplete

我在论坛上搜索了这个,我找到了这个:autocomplete not working with ajax generated textbox并且这个:jQuery autocomplete failing after dynamically adding additional text input field

但每一次,它都是文件准备好的功能,而我的是关键。我认为这有所不同。

情况如下:我有那些处理自动完成输入的功能。它使用jQuery和Ajax:

var truid = "";

$(function(){
    $(".autocomp").keyup(function() {
        var realid = $(this).attr('id');
        var searchid = $(this).val();
        var dataString = 'search=' + searchid;

        if(searchid != '') {
            $.ajax({
                type: "POST",
                url: "ajax_complete.php",
                data: dataString,
                cache: false,
                success: function(html) {
                    $("#result_"+realid).html(html).show();
                    truid=realid;
                }
            });
        }
        return false;    
    });

    $(".autoresult").on("click",function(e) {
        var $clicked = $(e.target);
        var $name = $clicked.find('.name').html();
        var $id = $clicked.find('.auto_id').text();
        var decoded = $("<div/>").html($name).text();
        $('#' + truid).val(decoded);
        $('#' + truid + "_true").val($id);
    });

    $(document).on("click", function(e) { 
        var $clicked = $(e.target);
        if (! $clicked.hasClass("autocomp")) {
            $("#result_" + truid).fadeOut(); 
        }
    });

    $('.autocomp').click(function() {
        truid = $(this).attr('id');
        $("#result_" + truid).fadeIn();
    });
});

我通常使用此输入来使用此自动完成功能:

<input type="text" class="autocomp" id="uniqueid" />
<input type="hidden" id="uniqueid_true" name="uniqueid" />
<div class="autoresult" id="result_uniqueid"></div>

当我在文档准备就绪时将这段代码直接放在html中时,它可以正常工作。

但是当我在ajax中生成这些输入时,自动完成功能不起作用,当我提出建议时没有任何反应。

我该如何运作?

1 个答案:

答案 0 :(得分:0)

对您的keyup执行相同操作 - 功能与click - 功能相同:

而不是......:

$(".autocomp").keyup(function() { [...] });

...写:

$(".autocomp").on("keyup", function() { [...] });