جستجو اتوماتیک با Ajax در MVC 5

در این پست قصد تا به طور کامل نحوه جستجوی اتوماتیک با استفاده از Ajax در Asp.Net MVC 5 را آموزش دهیم.

ابتدا یک متدد به صورت زیر در کنترلی که می خواهید جستجو اتوماتیک  انجام دهید ایجاد کنید.

public ActionResult GetData(string str)
{
    var query = (from p in db.Posts
                 orderby p.Id ascending
                 where p.PostName.Contains(str)
                 select p).Take(10);

    return Json(query.ToList(), JsonRequestBehavior.AllowGet);
}

در متدد بالا اطلاعات را از دیتابیس خواند وسپس 10 تای آنها را توسط json ارسال می کنیم.

کد های قسمت View

<input id="autoSearch" list="item" class="form-control " placeholder="جستجو..." />
<datalist id="item" style="direction: rtl;"></datalist>

اگر به کدهای بالا نگاه کنید یک input برای نوشتن متن جستجو و سپس از یک datalist برای نمایش کارکتر جستجو شده استفاده کردیم و همچنین برای ارتباط input و datalist از ویژه گی list در input را برابر با id آن قرار دادیم.

کدهای Jquery

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {

        $('#autoSearch').on("input", function () {

            var str = $('#autoSearch').val();

            if ($.trim(str).length) {
                getData(str);
            }
        });

        function getData(str) {
            $.ajax({
                type: 'GET',
                url: '/Home/GetData',
                data: { "str": str },
                dataType: 'json',
                success: function (data) {
                    if (data != null) {
                        $("#item").empty();
                        for (var i = 0; i < data.length; i++) {
                            $("#item").append("<option value=" + data[i].PostName + ">" + data[i].PostName + "</option>");
                        }
                    }
                },
                beforeSend: function () {

                },
                complete: function () {

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR + textStatus + errorThrown);
                }
            });
        }
    });
</script>

سپس توسط توسط jquery هنگامی که چیزی داخل input وارد می شود تابع getData را فراخوانی می کنیم و سپس اطلاعات را از سرور دریافت و در DataList نمایش می دهیم.

خروجی