我如何将复选框附加到我的 ajax 响应中答案

【问题标题】：How can i append checkboxes to my ajax response我如何将复选框附加到我的 ajax 响应中
【发布时间】：2015-02-12 20:16:15
【问题描述】：

我正在尝试为从数据库接收到的数据动态创建复选框。

jQuery 和 AJAX 调用：

$("#destinationName").autocomplete({
    source : function(request, response) {
        $.ajax({
            url: "${pageContext.request.contextPath}/showDestinations",
            type: "POST",
            data : { term : request.term },
            dataType : "json",
            success : function(data) {
                alert(data);
            }
        });
    }
});

<label>Destination</label>
<input type="text" id="destinationName" name="destinationName" value="${Form.destinationName}" class="field" />

当我保持警惕时收到的回复：

[ "abc", "def"]

请提供您宝贵的建议。作为 AJAX 和 jQuery 的新手，我很难获得这个结果。

【问题讨论】：

这是一个预期的响应吗？
您可以尝试查看此答案。它讨论了使用 jQuery 使用文本输入创建复选框。 stackoverflow.com/questions/2055459/…
自动完成功能已设置为目标字段。我的新要求是为此自动功能添加复选框，以便我可以选择多个复选框。希望你明白我的意思。
@Jalal 是根据服务器响应创建的复选框吗？
@aktiv：我正在使用 jquery 自动完成和 ajax 调用。一旦我在目标文本框中输入了一个字符或字符串，它应该通过查询 DB2 来检索输入格式的目标列表。到目前为止还不错，我只需要现有场景的复选框功能

标签： jquery ajax

【解决方案1】：

你可以试试这样的

success: function(data) {
  $("#resultDiv").html("");
  $.each(data, function(i, record) {
    $("#resultDiv").append("<input type='checkbox' id='chk-" + i + "' name='" + record + "' /> " + record);
  });
}

【讨论】：

它对我有用，但是，我的结果并没有根据输入的文本或字符串而改变。结果仅在第一次显示时带有复选框，并且在输入时不会更改。
你在什么事件上调用这个 ajax？
我正在使用 jquery 自动完成。当我输入 M 或 M.COM 时，包括此字母或文本在内的所有结果都将显示为自动建议。我想要与复选框相同的功能。
我通常看到 $("#resultDiv").html("");应该确保您的 div 已清理干净。对于自动完成，我认为您可能正在使用 keyup 功能或其他东西。确保在下次搜索时清理结果出现的 div
对于复选框，而不是将名称作为动态记录，我可以将其设为常量值，以便在控制器端检索检查结果吗？

【解决方案2】：

你可以试试这个：http://jsfiddle.net/4wf3rq04/

    use $.each(function(){...})

【讨论】：

它不允许我接受多个答案:(

【解决方案3】：

您可以使用以下代码

success: function (data) {
                if (data.d != null) {

                    var temp = data.d;

                    if (temp != '') {

                        var Response = temp.split(",");

                        if ((Response != '') && (Response.length > 0)) {

                            for (i = 0; i < Response.length; i++) {
                                $("#resultDiv").append("<input type='checkbox' id='chk-" + i + "' name='" + Response[i] + "' /> " + Response[i]);

                            }
                        }

                    }
                }
            }

【讨论】：