Jquery ui 自动完成未按预期工作

Jquery ui 自动完成未按预期工作,jquery-ui,autocomplete,asp.net-mvc-5,jquery-autocomplete,Jquery Ui,Autocomplete,Asp.net Mvc 5,Jquery Autocomplete,我尝试用jQueryUI1.10.2在MVC5中实现 @{ ViewBag.Title = "Home Page"; Layout = null; } <p> Enter country name @Html.TextBox("Country") <input type="submit" id="GetCustomers" value="Submit" /> </p> <span id="rData"><

我尝试用jQueryUI1.10.2在MVC5中实现

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


<p>
    Enter country name @Html.TextBox("Country")
    <input type="submit" id="GetCustomers" value="Submit" />
</p>

<span id="rData"></span>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
@Styles.Render("~/Content/themes/base/css")

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

 ...
            [HttpPost]
            public JsonResult AutoCompleteCountry(string term)
            {
                // just something to return..
                var list = new List<string>() { "option1", "option2", "option3"};

                var result = (from r in list
                    select r);

                return Json(result, JsonRequestBehavior.AllowGet);
            }
        }
我有两个问题 1.它用3个点打开下拉自动完成,但没有实际的字符串。 2.它有这样一个恼人的消息:发现了3个结果-我想消除它

您是否知道如何面对这两个问题,或者更简洁地在MVC5中实现它?

使用返回数据代替返回{label:item.Country,value:item.Country};

找到3个要点和3个结果是因为缺少jQuery UI css文件。该文件将格式化一个下拉列表,看起来会更好。您可以使用其他css自定义下拉列表的外观

另外,您看到3个空结果,因为您的JS正在引用item.Country

return { label: item.Country, value: item.Country };
但是您的服务器代码只发送了3个字符串

new List<string>() { "option1", "option2", "option3"};
或者,更改服务器代码以发送更复杂的对象

new List<Object>() { new { Country = "option1" }, new { Country = "option2" }, new { Country = "option3" } };
new List<Object>() { new { Country = "option1" }, new { Country = "option2" }, new { Country = "option3" } };