This is a migrated thread and some comments may be shown as answers.

Looking for a working example using a MVC Action method

10 Answers 582 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Evert
Top achievements
Rank 1
Evert asked on 21 Dec 2011, 01:23 PM
I am struggling getting the following to work:

<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;

        }

    }


My problems are:

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

Sort by
0
Atanas Korchev
Telerik team
answered on 22 Dec 2011, 09:56 AM
Hello,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Evert
Top achievements
Rank 1
answered on 22 Dec 2011, 10:36 AM
Thank you very much, this works!!!

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 
0
Atanas Korchev
Telerik team
answered on 22 Dec 2011, 10:43 AM
Hi,

 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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Evert
Top achievements
Rank 1
answered on 22 Dec 2011, 11:32 AM
Ok thank you!

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!.

0
Evert
Top achievements
Rank 1
answered on 22 Dec 2011, 04:28 PM
An update: after browsing the fora, I now have changed my script to:

<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
0
Atanas Korchev
Telerik team
answered on 23 Dec 2011, 09:14 AM
Hi,

 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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Philip
Top achievements
Rank 1
answered on 31 Dec 2011, 10:28 AM
Dear Atanas,

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
0
Atanas Korchev
Telerik team
answered on 02 Jan 2012, 01:41 PM
Hello,

 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() };
                    }
                }
            }
        });

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kesavan
Top achievements
Rank 1
answered on 05 Mar 2014, 11:33 AM
Hi Atanas,

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
0
Atanas Korchev
Telerik team
answered on 05 Mar 2014, 12:52 PM
Hello,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
AutoComplete
Asked by
Evert
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Evert
Top achievements
Rank 1
Philip
Top achievements
Rank 1
Kesavan
Top achievements
Rank 1
Share this question
or