0
kythor created
Hi guys, I want to have a textbox with autocomplete. In a previous project, this worked and showed a dropdown under the textbox with all possible values.
So I added this now to MPA CreateOrEditModel:
<div class="form-group form-md-line-input form-md-floating-label ui-widget">
<input id="Tags" class="ui-autocomplete-input form-control@(Model.Article.Tags.IsNullOrEmpty() ? "" : " edited")"
type="text" name="Tags" autocomplete="off"
value="@Model.Article.Tags">
<label>@L("Tags")</label>
</div>
<script type="text/javascript">
$(function () {
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("ui-autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
source: function (request, response) {
$.ajax({
url: "/mpa/articles/AutocompleteTagSuggestions", type: "POST", dataType: "json",
data: { term: request.term },
success: function (data) {
response($.map(data.result, function (item) {
return { label: item, value: item, id: item };
}));
}
})
},
search: function () {
// custom minLength
var term = extractLast(this.value);
if (term.length < 2) {
return false;
}
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
debugger;
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>
The ajax calls are working perfect but the dropdown with the results is not showing. This must be a CSS or jQuery UI thing maybe ABP is blocking or overriding? Any ideas?
