Reputation: 1239
I have really big problem with calling JSON with jQueryUI autocomplete. I have this fairly simple JS:
$(document).ready(function() {
$('#Editor_Tags').autocomplete({
source: "/Forums/Ajax/GetTags",
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.TagName);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
And this is model I'm trying to return:
public class TagView
{
public int TagId { get; set; }
public string TagName { get; set; }
public int Weight { get; set; }
}
But that's not the main issue. Main issue is, When I start typing, jQuery do not make request to controller. I'm 100% sure, that the Url speciefied is good. Because I can manually access to controller by typing /Forums/Ajax/GetTags?term=text And I get results for it. I'm using newset version of jQuery and jQUI directly rom google CDN.
Upvotes: 1
Views: 3878
Reputation: 1239
I have got it working with this code:
$('#Editor_Tags').autocomplete({
source: function (request, response) {
$.ajax({
url: "/Forums/Ajax/GetTags",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.TagName,
value: item.TagName
}
}));
}
});
}
});
Which essentialy is not that diffrent from what Andrew have posted.
Upvotes: 0
Reputation: 126082
The jQueryUI autocomplete widget expects data in the source
parameter to meet the following requirements:
[..] a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both.
So you have two options:
Change the viewmodel you're serializing to JSON to meet those requirements:
public class TagView
{
public string Label { get; set; }
public string Value { get; set; }
}
Change the autocomplete widget's source
parameter to be a function in which you perform the AJAX call yourself and format the data appropriately:
$("#Editor_Tags").autocomplete({
source: function (request, response) {
$.getJSON("/Forums/Ajax/GetTags", { term: request.term }, function (data) {
response($.map(data, function (el) {
return {
label: el.TagName,
value: el.TagId
};
}));
});
},
/* other autocomplete options */
});
This is assuming that the data returned from the server is a JSON array of TagView
objects.
The second piece of code is untested, but it should at least get you in the right direction.
Upvotes: 5