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

---

更新 - 简化尝试但仍然无法工作

_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 自动完成示例

根据最终分辨率进行更新< /strong>

确保您有 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 页面 自行下载

Answer 2

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

     [email protected](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 或较旧的自动完成插件版本也会有所帮助。