Question

我尝试使用jquery ui 1.10.2

在MVC 5中实现this

@{
    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点，但没有实际的字符串。它有“3个结果被发现”的烦人信息 - 我想消除它......

您是否知道如何面对这两个问题或更简洁的方式在MVC5中实现它？ enter image description here

Answer 1

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

此外，您看到3个空结果，因为您的JS引用了item.Country ...

return { label: item.Country, value: item.Country };

但是你的服务器代码只发送3个字符串。

new List<string>() { "option1", "option2", "option3"};

要修复，请将您的JS更改为仅引用该项（字符串）...

return { label: item, value: item};

或者，更改服务器代码以发送更复杂的对象

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

Answer 2

使用return data代替return { label: item.Country, value: item.Country };

自动完成无法按预期工作

2 个答案: