0
我使用jquery-ui-auto-complete-with-multi-values。我的文本框位於頁面的下游,但在頁面上方打開了自動完成菜單。我無法理解這個錯誤。我用jQuery網站上的例子。它是同樣的例子。ASP.NET MVC自動完成位置?
我在頁面上添加jquery和css。可能是什麼問題?
UPDATE
腳本
<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;
}
謝謝。
No code to show us? – cspolton
使用firebug來查看正在應用的css,並在網站上修復它 – Shyju
相同的示例。沒有變化。複製粘貼。 –