javascript - jQuery 自动完成 - TypeError : autocomplete is not a function in asp.net mvc 5

Question

我正在尝试使用 @url.action 在我的 dropDownList 上添加 jquery 自动完成功能，但由于某种原因它不起作用。看起来我已经加载了所有必需的 jquery。我已经尝试了一切(至少是我在网站或谷歌中找到的)。

我的 HTML + js:

<input id="test" name="test" />

@section scripts
{

@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/autocomplete.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#test').autocomplete({
            source: '@Url.Action("GetCitiesForAutocomplete", "Students")'

        });
    });
</script>
}

我的 Controller 学生:

    public JsonResult GetCitiesForAutocomplete(string term)
    {
        return Json(GetCities()
                    .Where(x=>x.Text.ToLower()
                    .Contains(term.ToLower())), JsonRequestBehavior.AllowGet);
    }

    private List<SelectListItem> GetCities()
    {
        return new List<SelectListItem> 
        {
            new SelectListItem {Text = "Jerusalem", Value = "0"},
            new SelectListItem {Text = "Haifa", Value = "1"},
            new SelectListItem {Text = "Tel Aviv", Value = "2"},
            new SelectListItem {Text = "Katzrin", Value = "3"},
            new SelectListItem {Text = "Beer Sheva", Value = "4"},
            new SelectListItem {Text = "Netanya", Value = "5"}     
        };
    }

我的问题是:我如何仅使用列表中的文本在下拉列表中自动完成。

例如:如果我按“je”-> 我会得到“耶路撒冷”

如果我按“te”-> 我会得到“特拉维夫”

谢谢。

Answer 1

更改 GetCitiesForAutoComplete 方法以返回所有城市。自动完成将处理过滤。

public JsonResult GetCitiesForAutocomplete()
{
    return Json(GetCities(), JsonRequestBehavior.AllowGet);
}