autocomplete extraparams is always null

Hello,

I am trying to implement autocomplete to a textbox using jquery. I am using MVC. I am trying to pass extra parameters but they are always null or jquery never add it to the query string.

Any suggestion?

View:

$(document).ready(function () {

        $("input#tbxFilter").autocomplete({
            source:'@Url.Action("Filter", "Circuit")',
            cacheLength: 0,
            delay: 500,
            extraParam: { "title": "test"}
            });
    });

@Html.TextBox("tbxFilter")

Controller:

 public ActionResult Filter(string term, string title)
        {
            string valueToUse = System.Web.HttpContext.Current.Request.QueryString["title"];

           return RedirectToAction("Index");
        }

Re: autocomplete extraparams is always null

Hi,

You can do the following-

View-

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <h2>
        AutocompletereturnsError</h2>
    <form id="form1" runat="server">
    <div class="demo">
        Extra1 <input type="text" id="extra1" /><br />
        Extra2 <input type="text" id="extra2" /><br />
        <div class="ui-widget">
            <input type="text" name="name-list" id="name-list" />
        </div>
    </div>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#name-list").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: '<%=Url.Action("FindBarcode", "ASPForum")%>',
                        data: "bc=" + request.term + "&limit=5" + "&extra1=" + $("#extra1").val() + "&extra2=" + $("#extra2").val(),
                        type: "GET",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        success: function(data) {
                            response($.map(data, function(item) {
                                return {
                                    label: item.barcode,
                                    value: item.id
                                }
                            }))
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            debugger;
                            alert(textStatus);
                        }
                    });
                }
            });
        });
    </script>
    </form>
</asp:Content>

Controller-

        public ActionResult AutocompletereturnsError()
        {
            return View();
        }
        public JsonResult FindBarcode(string bc, int limit, string extra1, string extra2)
        {
            var result = (new[] { new { id = 1, barcode = "abc" } }).ToList();
            result.Add(new { id = 2, barcode = "abcb" });
            result.Add(new { id = 3, barcode = "abcd" });
            result.Add(new { id = 4, barcode = "abce" });
            result.Add(new { id = 5, barcode = "abcr" });
            result.Add(new { id = 6, barcode = "abcf" });
            result.Add(new { id = 7, barcode = "abcg" });
            result.Add(new { id = 8, barcode = "abch" });
            result.Add(new { id = 9, barcode = "abcj" });
            result.Add(new { id = 10, barcode = "abcff" });
            result.Add(new { id = 11, barcode = "abcffd" });
            result.Add(new { id = 12, barcode = "cfsdfsdf" });
            result.Add(new { id = 13, barcode = "ckkk" });
            result.Add(new { id = 14, barcode = "ckkkrr" });
            result.Add(new { id = 15, barcode = "ckkkggg" });
            result.Add(new { id = 16, barcode = "ckkkfffdsfd" });
            result.Add(new { id = 17, barcode = "ckkkfdfd" });
            return Json(result.FindAll(c => c.barcode.IndexOf(bc) == 0).Take(limit), JsonRequestBehavior.AllowGet);
        }

Re: autocomplete extraparams is always null

Is there a way not using JSON? I am little bit confused with the code.

Re: autocomplete extraparams is always null

Hi,

When you are orking with MVC and ajax the best practice is to pass data is json result. Just pass your object to Json() method and return the result. What is confusing here?

Re: autocomplete extraparams is always null

Instead of using extraParams try setting the param in the Url.Action() call

$(document).ready(function () {
        $("input#tbxFilter").autocomplete({
            source:'@Url.Action("Filter", "Circuit", new { "title" = "test"})',
            cacheLength: 0,
            delay: 500
        });
    });