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

Question

如果使用普通的静态 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;
        },

    });

Answer 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({
                ...
            });
        }
    });
}​

Answer 2

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

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

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