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');
});

更新 - 简化尝试并仍然无法使用

_layout

<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 autocomplete examples

根据最终解决方案更新

确保您有对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>

或者自己从official jQuery UI Page

下载

Answer 2

我开发了一个插件形式的html扩展，使用jquery ui自动完成，但是非常简单和动态。这里的语法是这样的

     $@Html.AutoCompleteFor(model => model.Id, x => x.Code , "List")

我保留了所有可用的源代码（欢迎提出建议）和包含所有必要文件的zip文件。希望有所帮助！

项目网址 http://autocompletemvc.codeplex.com/releases/view/70140

Bin文件 http://autocompletemvc.codeplex.com/releases/70140/download/259741

Answer 3

我不认为你“在文本框中加载”，而是更多地“将自动完成附加到”文本框中。尝试为自动完成的“答案”创建JavaScript数组。

了解您是使用jQuery UI还是旧版自动完成插件版本也会有所帮助。

使用jquery自动完成难度

3 个答案: