MVC 5中的自动完成用户界面

Question

我正在MVC项目的文本框中实现自动完成功能，但是我的自动完成功能不会搜索我误输入的项目吗？

我的控制器：

[HttpPost]
        public JsonResult Index (string Prefix)
        {
            List<City> objList = new List<City>()
            {
                new City {Id=1, CityName="Perú"},
                new City {Id=2, CityName="Brasil"},
                new City {Id=3, CityName="Venezuela" },
                new City {Id=4, CityName="Chile"}
            };

            var CityList = (from N in objList where N.CityName.StartsWith(Prefix) select new { N.CityName });

            return Json(CityList, JsonRequestBehavior.AllowGet);
        }

我的JS：

<script type="text/javascript">
        //$(document).ready(function () {
        (function ($) {
            $("#CityName").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/Home/Index",
                        type: "POST",
                        dataType: "json",
                        data: { Prefix: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.CityName, value: item.CityName };
                            }))

                        }
                    })
                },
                messages: {
                    noResults: "", results: ""
                }
            });
        })

    </script>

我的页面：

@model Autocomplete.Models.City

@{
    ViewBag.Title = "Home Page";
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script type="text/javascript">
        //$(document).ready(function () {
        (function ($) {
            $("#CityName").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/Home/Index",
                        type: "POST",
                        dataType: "json",
                        data: { Prefix: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.CityName, value: item.CityName };
                            }))

                        }
                    })
                },
                messages: {
                    noResults: "", results: ""
                }
            });
        })

    </script>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <hr />

        <div class="form-group">

            <div class="col-md-12">
                @Html.EditorFor(model => model.CityName, new { htmlAttributes = new { @class = "form-control" } })

            </div>
        </div>

    </div>
}  

对不起，我的英语 谢谢