CODEWITHSUNDEEP
jqueryasp.net-mvc
Vince Bray
Vince Bray

Reputation: 53

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

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.

Upvotes: 1

Views: 3600

Answers (3)

Vadim
Vadim

Reputation: 17957

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

Upvotes: 1

Bob Lauer
Bob Lauer

Reputation: 845

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

Upvotes: 2

Brian Ball
Brian Ball

Reputation: 12596

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

Upvotes: 0

Related Questions