使用 jquery 和 mvc razor 的 delimitir 问题

Question

我不能向同一个字段添加几个值。我只能选择一个值，并且在输入,、; 或其他分隔符后，我无法选择另一个值。我希望它的工作方式类似于自动完成。

我有一个带有 jQ​​uery 绑定的文本框：

<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" />

firebug 没有错误。我的代码有什么问题？

Answer 1

遇到过这种firebug的问题。

我建议不要信任 Firebug 控制台 直到它包含错误消息

如果您的代码没有按预期工作，并且 firebug 没有向您显示任何错误消息，那么是时候在 chrome 中检查您的网页并查看控制台选项卡中未处理异常的确切位置，特别是当您'正在使用 ajax.

Answer 2

我建议您使用更新的 jQuery UI autocomplete 插件。 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);
});

Answer 3

jQuery UI 包含的自动完成功能与独立的 jQuery 插件具有不同的代码格式。这方面的详细信息可以在下面链接的 jQuery UI 网站上找到。

http://jqueryui.com/demos/autocomplete/

这里是一个简单的 jQuery UI 自动完成功能示例

$( "#Name" ).autocomplete({
        source: url,
        minLength: 1,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        }
    });

Answer 4

您使用的是什么版本的自动完成功能，jquery ui 不支持此功能。详情请见http://jqueryui.com/demos/autocomplete/#multiple。

这是页面中用于设置多选的片段

.autocomplete({
        minLength: 0,
        source: function( request, response ) {
            // delegate back to autocomplete, but extract the last term
            response( $.ui.autocomplete.filter(
                availableTags, extractLast( request.term ) ) );
        },
        focus: function() {
            // prevent value inserted on focus
            return false;
        },
        select: function( event, ui ) {
            var terms = split( this.value );
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.value );
            // add placeholder to get the comma-and-space at the end
            terms.push( "" );
            this.value = terms.join( ", " );
            return false;
        }
    });

Answer 5

1. 创建一个 div（容器）。

2. 设置样式，使其看起来像一个文本区域。

3. 将文本字段放在 div 中。向左浮动。清除它的边框。（因此，当光标在文本字段中时，div 看起来就像是文本区域。）

4. 将自动完成绑定到该字段。

5. 在选择时，创建一个 span 或 div 或类似 `TheLabel 的东西并将其添加到 div（容器）中。

   1.在添加之前，使用jquery .data()将对象保存在span中

   2.这将是一个很好的用户界面。

6. 如果愿意，您还可以提供删除先前选择的选项。