Question

我根据用户输入生成自动完成的动态文本框。

var projects = [
        {
            label: "Test12",
            desc: "responsive web application kit"
        },
        {
            label: "Londinium",
            desc: "responsive bootstrap 3 admin template"
        },
        {
            label: "It's Brain",
            desc: "Bootstrap based "
        }
    ];

    // Initialize autocomplete
    $(document).on('click', '.ac-custom', function () {
        $(this).autocomplete({
            minLength: 0,
            source: function (request, response)
            {
                $.ajax({
                    url: "/Home/GetInfo",
                    type: "POST",
                    dataType: "json",
                    data: { Name: $(this).val() },
                    success: function (data) {


                    }
                });
            },
            focus: function (event, ui) {
                $(this).val(ui.item.label);
                return false;
            },
            select: function (event, ui) {
                $(this).val(ui.item.label);
                return false;
            }
        })
        .autocomplete("instance")._renderItem = function (ul, item) {
            return $("<li>").append("<span class='text-semibold'>" + item.label + '</span>' + "<br>" + '<span class="text-muted text-size-small">' + item.desc + '</span>').appendTo(ul);
        }
    });

如果我将源代码作为项目，这是有效的，但我需要从数据库中获取，所以我调用一个动作方法，但不知怎的，这是行不通的。是因为我将ajax调用绑定到在运行时创建的控件。非常感谢您的帮助。谢谢

Answer 1

您需要通过成功回调传递数据

// Initialize autocomplete
    $(document).on('click', '.ac-custom', function () {
        $(this).autocomplete({
            minLength: 0,
            source: function (request, response)
            {
                $.ajax({
                    url: "/Home/GetInfo",
                    type: "POST",
                    dataType: "json",
                    data: { Name: $(this).val() },
                    success: function (data) {
                        response( data );
                    },
                    error: function (jqXHR, exception) {
                        var msg = '';
                        if (jqXHR.status === 0) {
                          msg = 'Not connect. Verify Network.';
                        } else if (jqXHR.status == 404) {
                          msg = 'Requested page not found. [404]';
                        } else if (jqXHR.status == 500) {
                          msg = 'Internal Server Error [500].';
                        } else if (exception === 'parsererror') {
                          msg = 'Requested JSON parse failed.';
                        } else if (exception === 'timeout') {
                          msg = 'Time out error.';
                        } else if (exception === 'abort') {
                          msg = 'Ajax request aborted.';
                        } else {
                         msg = 'Uncaught Error.';
                        }

                       alert(msg + "<br/>responseText: " + jqXHR.responseText);
                     }
                });
            },
            focus: function (event, ui) {
                $(this).val(ui.item.label);
                return false;
            },
            select: function (event, ui) {
                $(this).val(ui.item.label);
                return false;
            }
        })
        .autocomplete("instance")._renderItem = function (ul, item) {
            return $("<li>").append("<span class='text-semibold'>" + item.label + '</span>' + "<br>" + '<span class="text-muted text-size-small">' + item.desc + '</span>').appendTo(ul);
        }
    });

Answer 2

像这样更新源函数

source: function (request, response) {
                $.ajax({
                    url: '/Home/GetInfo',
                    data: { 'text': $.trim($('#yourtextboxid').val()) },
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.name,
                                id: item.id
                            }
                        }));
                    }
                })
            }

这会对你有所帮助

jquery动态自动填充文本框网址

2 个答案: