asp.net mvc jquery autocomplete doesn't activate controller action

Question

I have the jquery includes setup correctly I believe, datepicker is working. However, when I put a breakpoint on the controller for the autocomplete it never gets activated when typing in the text box. I have:

    <script type="text/javascript">
    $(document).ready(function () {
        $("input#sitesearchlist").autocomplete('<%= Url.Action("Filter", "Wos") %>');
    });
    </script>

where Filter is an action on the controller Wos as such:

    public ActionResult Filter(string q)
    {
        var siteList = _sitesRepository.GetSites(q);
        return Json(siteList, JsonRequestBehavior.AllowGet);
        //return siteList;
    }

and I realize should probably return a simple list not json to go with the first snippet. Ultimately I need to set an id in the data not the name so this is a simplified example to try to resolve the immediate problem, which is that when i run this there is no data pulled from the controller action, and when I set a breakpoint, it is fired on first run but NOT when you enter text in the text box:

    <%= Html.TextBox("sitesearchlist") %>

So i think the java gets activated for the autocomplete, since at some point it appears to have cached the letters 'ki' since if i type them, the list will appear below the text box with just those letters. Still, when you type, action doesn't fire.

If I visit the url, I do get the json data like:

[{"SiteId":153,"SiteName":"Name of Site"}]

So for some reason no matter what I have tried I get stuck the same way. Autocomplete says to put the java script at the head of the page, which is in my site.master, and the textbox is obviously further down the page. I think if json data was coming (even though controller breakpoint is never hit) and was the wrong format I should get a list of garbage or something in the list, yes? Thanks for any suggestions!!!!

EDIT: found this excellent page and ended up with the following:

    <script type="text/javascript">
    $(document).ready(function () {
        $("#tags").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Wos/Filter", type: "POST", dataType: "json",
                    data: { searchText: request.term, maxResults: 10 },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.SiteName, value: item.SiteName, id: item.SiteId }
                        }))
                    }
                })
            },
            minLength: 3

        });
    });
</script>

and

    [HttpPost]
    public JsonResult Filter(string searchText, int maxResults)
    {
        var siteList = _sitesRepository.GetSites(searchText);
        return Json(siteList, JsonRequestBehavior.AllowGet);
    }

and it is working fine now. Without a full understanding of this (just getting started with java, can't you tell?) it appears the request/response is what does the trick. This must be due to the mvc2 changes referenced on the page, I assume, since so many working examples are cited here that don't work for me, even with a simple list, but this does.

the answer is here theycallmemrjames.blogspot.com/2010/03/… — Vince Bray
– Vince Bray, Commented Jan 15, 2011 at 20:08

Bob Lauer · Accepted Answer · 2011-01-15 03:22:55Z

2

Try decorating your Filter function with the HttpPost attribute like such:

[HttpPost]
public ActionResult Filter(string q)
{
    var siteList = _sitesRepository.GetSites(q);
    return Json(siteList, JsonRequestBehavior.AllowGet);
    //return siteList;
}

answered Jan 15, 2011 at 3:22

Bob Lauer

8451 gold badge7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vadim · Accepted Answer · 2011-01-15 18:07:25Z

1

EDIT

Actually it looks like you're not using autocomplete correctly. See the example here http://jqueryui.com/demos/autocomplete/#remote-jsonp

try doing (Hopefully the parentheses and braces are correct)

$("input#sitesearchlist").autocomplete({source: function(request, response) {
   $.getJSON('<%= Url.Action("Filter", "Wos") %>', {q: request.term}, function(data) {
       response($.map(data, function(item) {
           return {label: item.SiteName, value: item.SiteId};
       }));
   });
}});

edited Jan 15, 2011 at 18:07

answered Jan 15, 2011 at 3:33

Vadim

18k5 gold badges41 silver badges62 bronze badges

4 Comments

Vince Bray Over a year ago

Thanks, that appears to be an ie bug and I'm just using FF.

Vince Bray Over a year ago

That also doesn't fire the controller. I also changed the url.action to simply "/Wos/Filter" like my updated example to no avail. Interesting, the example you link to (i was looking at remote data not json though, thanks) uses the $.ajax which is more verbose but works. Maybe when my java book gets here some of this will make more sense....

Vince Bray Over a year ago

Trying to convert my code to your more concise format using getJSON. In firebug I see 400 bad request and see it is massacring my url. It looks like it is interpreting the string as a literal rather than the c# kicking in. Anyway thanks for your help!

Vince Bray Over a year ago

Nevermind, I had moved the code to a separate file, wasn't lighting up the c#. Also had added [HttpPost] as suggested, cannot use that with the get I'm thinking since it's not a post. Also I have learned that I must always reload the browser when changing the html/java. Wonder how many times I've had this working and never saw it work. Thanks again!!

Brian Ball · Accepted Answer · 2011-01-15 03:12:57Z

0

Is input#sitesearchlist a valid jQuery selector? To be sure, I would give the textbox an id and run a jQuery selector against that.

HTH

answered Jan 15, 2011 at 3:12

Brian Ball

12.7k3 gold badges43 silver badges56 bronze badges

1 Comment

Vince Bray Over a year ago

I think so, it does drop down the list where it has cached the letters 'ki' so I believe it is attaching the script to the textbox correctly.

Collectives™ on Stack Overflow

asp.net mvc jquery autocomplete doesn't activate controller action

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related