使用jquery自动完成难度

Question

我正在使用jquery自动完成功能,但在文本框中加载自动完成功能很少

我的模型如下:

Users = new List<string>();
foreach (var item in User.LoadSortedByName())
{
    Users.Add(item.Name+"\n");
} 

视图:

<p>@Html.TextBox("user", "")
 $(function () {
           $("input#user").autocomplete('@Model.Users');
});

---

更新 - 简化的尝试,但仍然没有工作

_布局

<script src="@Url.Content("~/Scripts/jquery.autocomplete.js")" type="text/javascript"></script>

View


  <p><input type="text" id="tags" /></p>

<script type="text/javascript">
    $(function () {
            var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });


    });

Answer 1

您应该将自动完成行为附加到文本框中.

也就是说,如果你问我,jQuery库中包含的自动完成版本并不是那么简单.

$("input#user").autocomplete({
    source: function (request, response) {
        // define a function to call your Action (assuming UserController)
        $.ajax({
            url: '/user/GetUsers', type: "POST", dataType: "json",

            // query will be the param used by your action method
            data: { query: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item, value: item };
                }))
            }
        })
    },
    minLength: 1, // require at least one character from the user
}); 

在控制器中,定义以下操作

public ActionResult GetUsers(string query) 
{
    var users = (from u in User.LoadSortedByName()
                where u.Name.StartsWith(query)
                orderby u.Name // optional but it'll look nicer
                select u.Name).Distinct().ToArray();

    return Json(users);
}

此实现不允许在文本框中使用多个值; 有关如何执行此操作的示例,请检查jQuery自动完成示例

根据最终解决方案更新

确保您有对jQuery UI Core的引用.

来自Microsoft CDN:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>`

来自Google CDN:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>

或者从官方的jQuery UI页面自己下载