Я использую автозаполнение JQueryUI, и мне интересно, как использовать настраиваемый объект в качестве источника данных (т.е. я хочу передать обратно список следующего типа):
public class Tag
{
public string Name { get; set; }
public int Count { get; set; }
}
код автозаполнения, который я сейчас использую (и который отлично работает, когда я передаю прямой строковый массив имен), в значительной степени является копией с сайта jQuery UI:
$(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("autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
source: function (request, response) {
$.getJSON("Home/GetTag", {
term: extractLast(request.term)
}, response);
},
search: function () {
// custom minLength
var term = extractLast(this.value);
if (term.length < 1) {
return false;
}
},
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;
}
});
});
Единственное, что я изменил из исходного демонстрационного источника - это URL-адрес, и я разделяю его пробелом, а не запятой (для множественного автозаполнения).
Вот HTML:
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags"/>
</div>
В идеале я хочу представить пользователю список имен с соответствующим счетчиком рядом.