Question

我使用jquery-ui-auto-complete-with-multi-values。我的文本框位于页面的下游，但在页面上方打开了自动完成菜单。我无法理解这个错误。我使用了jquery站点上的示例。它是相同的考试。

我在页面上添加了jquery和css。可能是什么问题？

更新

脚本

<style>
.ui-autocomplete-loading {
    background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function () {

    var availableTags;
    $.ajax({
        url: '@Url.Action("GetTags", "Question")',
        type: 'GET',
        cache: false,
        beforeSend: function () {
            // Show your spinner
        },
        complete: function () {
            // Hide your spinner
        },
        success: function (result) {
            availableTags = result;
        }
    });

    function split(val) {
        return val.split(/,\s*/);
    }
    function extractLast(term) {
        return split(term).pop();
    }

    $("#tags")
        // don't navigate away from the field on tab when selecting an item
        .bind("keydown", function (event) {
            if (event.keyCode === $.ui.keyCode.TAB &&
                    $(this).data("autocomplete").menu.active) {
                event.preventDefault();
            }
        })
        .autocomplete({
            minLength: 0,
            source: function (request, response) {
                // delegate back to autocomplete, but extract the last term
                response($.ui.autocomplete.filter(
                    availableTags, extractLast(request.term)));
            },
            focus: function () {
                // prevent value inserted on focus
                return false;
            },
            select: function (event, ui) {
                var terms = split(this.value);
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push(ui.item.value);
                // add placeholder to get the comma-and-space at the end
                terms.push("");
                this.value = terms.join(", ");
                return false;
            }
        });
});
</script>

控制器

[HttpGet]
public JsonResult GetTags()
{
    var data = entity.Tags.Select(x => new { label = x.TagName, value = x.TagName });
    return Json(data, JsonRequestBehavior.AllowGet);
}

剃刀

<div class="demo">
    <div class="ui-widget">
        @Html.TextBoxFor(x => x.Title, new { @class = "my_text_box", id = "tags" })
    </div>
</div>
<!-- End demo -->
<div class="demo-description">
   <p>
      Usage: Enter at least two characters to get bird name suggestions. Select a value
                    to continue adding more names.
   </p>
   <p>
      This is an example showing how to use the source-option along with some events to
                    enable autocompleting multiple values into a single field.
   </p>
</div>

的CSS

.ui-autocomplete {
    position: absolute;
    cursor: default;
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

感谢。

Answer 1

我发现了问题。它是关于我在jquery-ui版本中的CurCss。在旧版本的jquery-ui中没有这种方法。我从google-apis获得了脚本参考。问题现在已解决。

感谢。

ASP.NET MVC自动完成位置？

1 个答案: