Question

我在jsp中有自动完成功能：

<input type="text" placeholder="${commodityCode_pl}" name="commodityCode" id="commodityCode" maxlength="8" style="width: 120px">

脚本：

<script type="text/javascript">

     $(document).ready(function () {

          $("#commodityCode").autocomplete({
    minLength:3,
    source:function (request, response) {
        $.getJSON("<c:out value="${pageContext.request.contextPath}" />/storeCommodity/storeCommodity/loadByIsCmdCode/" + request.term + ".html", function (list) {
            response(jQuery.map(list.storeCommodities, function (item) {
                return {
                    label:item.commodityCode,
                    value:item.commodityCode
                }
            }))
        });
    },
    select:function (e, ui) {
        $("#commodityCode").html("(" + ui.item.isCmdCode + ")");
      }
    });

  });

</script>

但是当我运行代码时，自动完成结果显示在jsp页面的左上角。虽然它应该出现在输入字段的底部。

Answer 1

使用 appendTo：YourContainerDiv

$("#TextBox").autocomplete({
                appendTo: '.ContainerDiv',
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("Action","Controller")',
                        type: "POST",
                        dataType: "json",
                        data: { Prefix: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.Name, value: item.Name };
                            }));

                        }
                    })
                }

            });

自动完成结果显示在页面左上方而不是spring mvc中输入的底部

1 个答案: