自动完成结果显示在页面的左上角，而不是春季 MVC 中输入的底部

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

use appendTo：YourContainerDiv

1. $("#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 };
                               }));
                           }
                       })
                   }
               });