<div>
<input id="searchSomething" />
</div>
<script type='text/javascript'>
$(document).ready(function () {
$("#searchSomething").kendoAutoComplete({
minLength: 3,
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
transport: {
read: "Service/Search",
dialect: function (data) {
return { wildcard: $("#searchSomething").val() };
}
}
}
});
});
</script>
Action method:
public class ServiceController : Controller
{
public ActionResult Search(string wildcard)
{
return Something;
}
}
1. wildcard is always null.
NOTE 1.1: By the way, the action method 'Search' is correctly called (of course after typing 3 characters)!
NOTE 1.2: If I directly call the action method from the browser the wildcard is correctly filled.
2. what should the ActionResult return?
In other words I am looking for a working example.
Thanks for any help!
10 Answers, 1 is accepted
The dialect setting has been renamed to parameterMap hence the problem.
In your action method you need to return JSON:
public
ActionResult Search(
string
wildcard)
{
var result =
new
[] { wildcard +
"1"
, wildcard +
"2"
};
return
Json(result, JsonRequestBehavior.AllowGet);
}
Find attached a running sample project. Kind regards,
Atanas Korchev
the Telerik team
A related question:
Is it possible to embed with every text item a related value too, not visible to the user? The socalled Data/Text item combination.
Evert
You need to use a different widget to do this - try a combobox or a dropdownlist. The autocomplete is just a simple textbox which suggests a list of values to the user.
Regards,Atanas Korchev
the Telerik team
Sorry I did not ask this in my first posting, because I am now struggling with the server side paging stuff.
I have added now:
serverFiltering: true,
serverPaging: true,
pageSize: 10,
But how do I get/read the values of a skip/take on the server? I saw the OData examples but could not transform it for my situation
Thanks again for any help!
By the way:
I am transforming my ASP.NET Forms based site for a customer to a MVC 3 site based on your framework. An now I am amazed how simple things get! This is the way to code I think!.
<div style="margin-top: 0px; margin-left: 70px">
<input id="searchSomething" style="width: 300px" />
</div>
<script type='text/javascript'>
$(document).ready(function () {
$("#searchSomething").kendoAutoComplete({
minLength: 3,
dataSource: {
transport: {
read: "Service/Search",
parameterMap: function (data) {
return {
wildcard: $("#searchSomething").val(),
take: data.take,
skip: data.skip
};
}
},
serverFiltering: true,
serverPaging: true,
pageSize: 10
}
});
});
</script>
My MVC 3 Action method is:
public ActionResult Search(string wildcard, int take, int skip)
{
var pagedResults = SomeService.Find(wildCard, skip, take);
return Json(pagedResults(pr => pr.Id), JsonRequestBehavior.AllowGet);
}
As you can see I have added the skip and take. This seems to work: the very first call I get a 0 for skip and an expected 10 for take. I was hoping when scrolling down though the search results inside the autocomplete box (using the cursor keys or page down), automatically a new call would be made with skip 10 and take 10. Am I misinterpreting something?
Best regards,
Evert
Currently the autocomplete will not make additional requests when scrolling. It will always load as many items as specified by the pageSize of the datasource.
Regards,Atanas Korchev
the Telerik team
I tested this attached project and it doesn't seem to work.
First time I enter 3 characters, it brings the options. This is fine.
When I then enter a completely different set of characters I get nothing.
Then I enter the originally entered characters and I get results again.
It seems to be caching this. Do you know what's wrong?
Kind regards
Yes, the autocomplete is configured for client-side filtering in this example. This is the reason the action method is hit only once. Here is how to enable sever-side filtering:
$("#searchSomething").kendoAutoComplete({
minLength: 3,
dataSource: {
serverFiltering: true,
transport: {
read: "Home/Search",
parameterMap: function (data) {
return { wildcard: $("#searchSomething").val() };
}
}
}
});
Atanas Korchev
the Telerik team
Can you please send me the working copy of the example, having autocomplete with serverfiltering and Paging,
I am struggling to work the same.
my email id : kesavan.subramani@ibs.net
I have attached the sample code which I have tried.
Thanks & Regards
Kesavan
The sample application that ships with Telerik UI for ASP.NET MVC includes such an example out of the box.
View:
Areas\razor\Views\web\autocomplete\serverfiltering.cshtml
Controller:
Controllers\HomeController.cs (the GetProducts method).
Regards,
Atanas Korchev
Telerik