Question

I use jquery-ui-auto-complete-with-multi-values. My textbox is downstream of page, But autocomplete-menu is opened above the page. I cant understand this bug. I used example that is on jquery site. Its is same examle.

I add jquery and css at the page.What could be the problem?

UPDATE

Script

<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>

Controller

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

Razor

<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;
}

Thanks.

Answer 1

I found the problem. Its about CurCss in jquery-ui version that I have. In older version of jquery-ui has not this method. I got script refrence from google-apis. Problem is fixed now.

Thanks.