asp.net mvc - 实现“自动完成"；博客的标签选择? [英] asp.net mvc - implementing an "autocomplete" tags selection for a blog?

问题描述

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

I'm working on a blog system for my own use, and would like to implement an auto-complete tags selection (similar to stackoverflow), how would I implement something like this? Any example or links to a tutorial would be greatly appreciated.

谢谢.

推荐答案

我决定试一试 jQuery UI Autocomplete，它似乎很简单 :) 下面是 javascript 代码:

I've decided to give jQuery UI Autocomplete a try and it seems to be easy enough :) Here's the javascript code:

$(document).ready(function () {
    function split(val) {
        return val.split(/,s*/);
    }
    function extractLast(term) {
        return split(term).pop();
    }

    $("#TagsString")
    // don't navigate away from the field on tab when selecting an item
            .bind("keydown", function (event) {
                if (event.keyCode === $.ui.keyCode.TAB &&
                        $(this).data("autocomplete").menu.active) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                source: function (request, response) {
                    $.get("/Blog/GetTags", { term: extractLast(request.term) }, function (data) {
                        response($.map(data.tags, function (item) {
                            return {
                                label: item.Name,
                                value: item.Id
                            }
                        }))
                    }, "json");
                },
                minLength: 2,
                dataType: 'json',
                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.label);
                    // add placeholder to get the comma-and-space at the end
                    terms.push("");
                    this.value = terms.join(", ");
                    return false;
                }
            });
});

这是 HTML:

<p>
            @Html.TextBoxFor(Model => Model.TagsString, new { @tabindex = "2", @size = "22", @value = "", @class = "text_input" })
            <label for="TagsString">
                <strong class="leftSpace">Tags</strong></label></p>
<style>
    .ui-autocomplete-loading
    {
        background: white url('/Content/Images/ui-anim_basic_16x16.gif') right center no-repeat;
    }
</style>

下面是动作:

[HttpGet]
        public virtual JsonResult GetTags(string term)
        {
            var getTags = _tag.All().Where(t => t.Name.ToLower().Contains(term.ToLower())).OrderBy(t => t.Name).ToList();

            TagViewModel model = new TagViewModel()
            {
                Tags = Mapper.Map<List<Tag>, List<TagModel>>(getTags)
            };

            return Json(new
            {
                tags = model.Tags
            }, JsonRequestBehavior.AllowGet);
        }

效果很好:)

这篇关于asp.net mvc - 实现“自动完成"；博客的标签选择?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！