asp.net mvc - 为博客实施"自动填充"标签选择？

Question

我正在开发一个供我自己使用的博客系统,并希望实现一个自动完成的标签选择(类似于stackoverflow),我将如何实现这样的东西？任何示例或指向教程的链接将不胜感激.

谢谢.

Answer 1

在这里查看我的问题Jquery,使用json自动完成,id与显示值

我们实际上"借用"(读取复制并粘贴)SO的自动完成javascript然后稍微调整一下 - 例如重命名它以便它不会干扰jquery ui的自动填充 e.

这两者实际上非常相似,但我们特别希望有一个像SO这样的标签系统.

你可以把我用过的代码拉到http://pastebin.com/t29RCCZg

这是我们用于标签的示例动作

public ActionResult ProfileTags(string prefix, int? limit)
    {
        if (!limit.HasValue)
            limit = ConfigurationHelper.Paging.TagList;

        if (String.IsNullOrEmpty(prefix))
            prefix = String.Empty;

        ProfileTagModel model = new ProfileTagModel()
        {
            Tags = profileTagRepository.GetList(new ProfileTagsByPrefixQuery(prefix)).OrderBy(x => x.Name).Take<ProfileTag>(limit.Value)
        };

        return View(model);
    }

视图看起来像这样

<%@ Page Language="C#" ContentType="text/html" Inherits="System.Web.Mvc.ViewPage<ProfileTagModel>" %>

<% if(Model.Tags != null) { %>
    <% foreach (ProfileTag tag in Model.Tags) { %>
        <%= tag.Name + ((tag.ProfileCount > 0) ? " (" + tag.ProfileCount.ToString() + ")" : String.Empty) %>
    <% } %>
<% } %>

然后我们在页面上的使用看起来像这样

$().ready(function () {
    $("#ProfileTags").troppinautocomplete('<%= Url.Action("ProfileTags", "Filter") %>', {
        max: 10,
        highlightItem: true,
        multiple: true,
        multipleSeparator: " ",
        matchContains: false,
        scroll: true,
        scrollHeight: 300,
        dataType: "html"
    });


})

但是,您不必这样做.您可以使action方法返回一个对象数组作为json,然后通过更改声明自动完成的方式,您可以实际格式化标记以显示图标或其他功能.

下面是一个采用json格式化样本的样本

$('#troppinSearch').troppinautocomplete(url, {
        dataType: 'json',
        parse: function (data) {
            var rows = new Array();
            if (data != null) {
                for (var i = 0; i < data.length; i++) {
                    rows[i] = { data: data[i], value: data[i].Id, result: data[i].Title };
                }
            }
            return rows;
        },
        formatItem: function (row, i, n) {

            return '<table><tr><td valign="top"><img height="28" width="28" src="' + row.ImageUrl + '" /></td><td valign="top" style="padding:0px 0px 0px 6px;"><div>' + row.Title + '</div><div><small>' + row.ResultType + '</small></div></td></tr></table>';
        },
        formatResult: function (row, i, n) {
            return row.Id;
        },
        width: 336,
        max: 20,
        highlightItem: true,
        multiple: false,
        matchContains: true,
        scroll: true,
        scrollHeight: 300
    }).result(function (event, data, formatted) {
        var type = data.ResultType.toLowerCase();
        var id = data.Id;

        if (type == "product") {
            window.location.href = '/Shop/Product/' + id;
        } else {
            window.location.href = '/Profile/Index/' + id;
        }
    });

这个动作看起来像这样

public ActionResult Search(string contentType, string prefix, int? limit)
    {
        if (!limit.HasValue)
            limit = ConfigurationHelper.Paging.ProfileList;

        SearchResponse response = GetSearchResults(contentType, prefix);

        var dropDownResults = (from r in response.Results
                              select new
                              {
                                  Id = r.Id,
                                  Title = r.Name,
                                  ImageUrl = r.DefaultImage,
                                  ResultType = r.ResultType.ToString()
                              }).Distinct().Take(limit.Value);

        return Json(dropDownResults.ToList(), JsonRequestBehavior.AllowGet);
    }

当您这样做时,您不需要视图.自动完成器接收json数据并神奇地完成所有操作.最后的.Result函数允许您设置在进行选择时发生的事件.在这种情况下,它实际上是将用户发送到另一个页面,但我们已经使用它来设置隐藏字段中的值.

编辑

我忘记了这段代码的内置CSS类.这是一个示例CSS.

.ac_results{
padding:0;
border:1px solid #4c4c4c;
background-color:#ffffff;
overflow:hidden;
z-index:99999;
text-align:left;
font-size: 14px; line-height:14px;
color: #333333;
}

.ac_highlight{
font-weight:bold;
text-decoration:underline;
background-color: #ff6600;
color: #ffffff;
}

.ac_results ul{
width:100%;
list-style-position:outside;
list-style:none;
padding:0;
margin:0;

}

.ac_results li{
margin:0;
padding:3px 6px 3px 6px;
cursor:default;
display:block;
line-height:14px;
overflow:hidden;
}

.ac_loading{
background:#fff url(/Content/images/loading.gif) right center no-repeat;

}

.ac_over{
background-color:#ff6600;
color:#ffffff;

}