如果从ajax生成，jquery自动完成不起作用答案

【问题标题】：jquery autocomplete no work if generate from ajax如果从ajax生成，jquery自动完成不起作用
【发布时间】：2012-03-07 23:16:32
【问题描述】：

如果使用普通的静态 html/php 页面，它的自动完成功能可以正常工作。

但我正在开发一个动态加载 (AJAX) 的模块，该模块会生成与上面相同的 HTML 到一个区域中。我无法让自动完成功能工作。

知道如何解决这个问题吗？我到处搜索并尝试了所有方法，但显然还不是正确的解决方案。

//
// this is the ajax code load dynamic contents in a #display_area
// from onclick=selected_purchase()
//

    function selected_purchase() {
      var fields = $(":input").serialize();
        $.ajax({ 
        url: "purchase4",
        type: "POST",
        dataType: "html",
        data: fields ,
        beforesend: function(a) {
            // before send process here
            showBusy();
        },
        success: function(html) {
            // success process here ...
            processForm(html);

        }   
    });

      }


//
// this is the autocomplete code  
//

$( "#supplier" ).autocomplete({ //the recipient text field with id #supplier
        source: function( request, response ) {
            $.ajax({
                url: "search_supplier",
                dataType: "json",
                data: request,
                success: function(data){
                    if(data.response == 'true') {
                       response(data.message);
                    }
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            // Do something extra on select...
                // add user id to hidden input    

            $('input[name="name"]').val(ui.item.value);
            $('input[name="sl"]').val(ui.item.sl_id);
            return false;
        },

    });

【问题讨论】：

在没有看到您的代码的情况下很难提供帮助，您能发布到目前为止的内容吗？
谢谢，添加了一些代码希望能有所帮助

标签： jquery ajax autocomplete

【解决方案1】：

您可能必须在加载内容后初始化插件实例。

$("#container").load('some url', function() {
    $(this).find('#autocomplete').autocomplete();
});

此代码可能会有所不同，具体取决于您用于加载内容的方法（$.ajax、.load()...）。常见的做法是在异步请求完成后执行的回调中初始化你的插件，通常称为“成功”回调。

现在我们有了您的代码示例，您应该这样做：

function selected_purchase() {
    var fields = $(":input").serialize();
    $.ajax({
        ...
        success: function(html) {
            // success process here ...
            processForm(html);

            // assuming "processForm" append the "html" to the DOM
            // you can now call autocomplete
            $( "#supplier" ).autocomplete({
                ...
            });
        }
    });
}

【讨论】：

如果 processForm() 是附加新 html 的方法，那么是的。
@DidierGhys 我已经按照你的建议实现了 ... $("#PaymentIn").load('/Bank/_PaymentIn/', function () { $(this).find(' #ChequeNo').autocomplete(); }); $("input#ChequeNo").autocomplete({......但这不起作用......任何想法plz..
@Sadaquat 我无法帮助您解决“不起作用”。您是否在控制台中遇到错误？您是否尝试过在回调中进行调试以检查是否可以找到您要使用的元素？数据是否正确加载？
@DidierGhys 感谢您的解决方案有效，但语法有所不同，原因与您所说的相同，但我已经在一个函数中敲击了一个自动完成功能，所以我只是在 ajax 之后调用了该函数，它就像一个魅力...:)再次感谢..

【解决方案2】：

您的 Php 脚本（我猜）正在发送 JSon ？这是通常的问题，你的外流应该看起来像

['toto','titi','tata']

您可以使用echo json_encode($myArrayWithStringValues) 获得相同的结果。

【讨论】：