Wednesday, March 14, 2012

MVC3 Autocomplete Jquery


View

<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>
<div class="demo">
    <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",
                    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>

Controller

public ActionResult AutocompletereturnsError()
        {
            return View();
        }
        public JsonResult FindBarcode(string bc, int limit)
        {
            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);
        }

No comments:

Post a Comment