Two jQuery 'identical' autocomplete textboxes but only one works

Question

I have two jQuery autocomplete textboxes on a mvc web page. One that returns a list of questions and another that returns a list of tags.

The questions textbox works perfectly but the tags text box only sends a null string to its controller.

The jQuery javascript is an exact match apart from the Url.Action, the non working one is displayed below:

<script type="text/javascript">
    $(document).ready(function() {
        $('#searchTag').autocomplete('<%= Url.Action("AutoComplete", "Tags") %>', {
            dataType: 'json',
            parse: function(data) {
                var rows = new Array();
                for (var i = 0; i < data.length; i++) {
                    rows[i] = { data: data[i], value: data[i].Name, result: data[i].Name };
                }
                return rows;
            },
            formatItem: function(row) {
                return row.Name;
            },
            delay: 40,
            autofill: true,
            selectFirst: false,
            highlight: false,
            multiple: true,
            multipleSeparator: ";"
        });
    });
</script>

The Tags Controller is called and returns the Json data correctly as I have hard coded a 'b' string parameter to the LookUpTag method to make sure, but the string t parameter for AutoComplete is always null.

    public ActionResult AutoComplete(string t)
    {
        IQueryable<Tag> searchResults = tagRepository.LookUpTag("b");

        var data = (from searchResult in searchResults
                    select new { Id = searchResult.ID, Name = searchResult.Name }).ToList();
        return Json(data);
    }

Is there any logical reason for this?

Answer 1

$('#searchTag')

Searching for an ID only returns a single element. Try using a classname.

Answer 2

Only thing I can see is that your parameter in your action is named t. If you're using this autocomplete plugin, then it looks like the search value will be sent through as a query string parameter named q (i.e. it'll request a url such as .../Tags/AutoComplete?q=b). The MVC will then try to match that query string parameter to a parameter on your action also called q.

So it might be as simple a fix as changing your action signature to:

public ActionResult AutoComplete(string q)