使用jquery和mvc razor的delimitir问题

Question

我不能在同一个字段中添加几个值.我只能选择一个值,经过我的输入,,;或其它分隔符,我不能选择另外一个.我希望它的工作方式与自动完成类似.

我有一个jQuery绑定的文本框:

<div class="editor-field">
    @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name)
</div>
<script type="text/javascript">
$(document).ready(function () {
    $("#Name").autocomplete('@Url.Action("TagName", "Tag")', {
        minChars: 1,
        delimiter: /(,|;)\s*/,
        onSelect: function(value, data){
            alert('You selected: ' + value + ', ' + data);
        }
    });
});
</script>

它使用来自我的控制器的数据:

public ActionResult TagName(string q)
{
    var tags = new List<TagModel>
    {
        new TagModel {Name = "aaaa", NumberOfUse = "0"},
        new TagModel {Name = "mkoh", NumberOfUse = "1"},
        new TagModel {Name = "asdf", NumberOfUse = "2"},
        new TagModel {Name = "zxcv", NumberOfUse = "3"},
        new TagModel {Name = "qwer", NumberOfUse = "4"},
        new TagModel {Name = "tyui", NumberOfUse = "5"},
        new TagModel {Name = "asdf[", NumberOfUse = "6"},
        new TagModel {Name = "mnbv", NumberOfUse = "7"}
    };

    var tagNames = (from p in tags where p.Name.Contains(q) select p.Name).Distinct().Take(3);

    string content = string.Join<string>("\n", tagNames);
    return Content(content);
}

我正在使用这些脚本:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.autocomplete.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Scripts/jquery.autocomplete.css")" rel="stylesheet" type="text/css" />

萤火虫没有错误.我的代码出了什么问题？

Answer 1

我建议您使用更新的jQuery UI 自动完成插件。jQuery ui 1.8 甚至作为新 ASP.NET MVC 3 项目的一部分进行分发。

就您的代码而言，尝试像这样修复它：

var url = '@Url.Action("TagName", "Tag")';
$('#Name').autocomplete(url, {
    minChars: 1,
    multiple: true,
    formatResult: function(row) {
        return row[0].replace(/(<.+?>)/gi, '');
    }
}).result(function (event, data, formatted) {
    alert(!data ? "No match!" : "Selected: " + formatted);
});