jquery自动完成使用'@'答案

【问题标题】：jquery autocomplete using '@'jquery自动完成使用'@'
【发布时间】：2012-12-06 06:10:56
【问题描述】：

我想使用 jQuery UI 自动完成来实现这种output（提琴手演示）。

我的示例的唯一问题是箭头键事件中存在与 jquery 自动完成不同的问题。

【问题讨论】：

嗨，晚安！所以你想要相同的行为，即如果隐藏标签的值为 = @[C#] 并且 textarea 为 @C# 但对于这个 jsfiddle？干杯！
不是这个 jsfiddle 我想使用 jquery 自动完成插件...这个有问题尝试使用你的箭头键，直到你到达下拉列表的末尾，但确保首先填充 textarea
Okies，尝试了箭头键，似乎在等待 +1 事件；如果您可以使用 jsfiddle 详细说明您的输入和输出需求，我可能会为您提供帮助。 :)
实际上 jsfiddle 的输出是我需要的......但我想使用 jquery 自动完成来实现它。我使用的插件不同，并且箭头键和选择有问题......那么你可以在 jquery 自动完成上做到这一点，并与 jsfiddle 具有相同的输出吗？
嗯...所以你的意思是：使用这个jsfiddle.net/67dxH 和你想要的 1) 从文本区域中选择并 2) 呈现输出文本框中的值？抱歉，如果我可能会问太多问题，我只是想确保我正确理解您的问题:)

标签： javascript jquery jquery-ui jquery-plugins

【解决方案1】：

我写了这个问题中提到的小部件并解决了这个问题：

http://www.hawkee.com/snippet/9391/

【讨论】：

【解决方案2】：

在这里工作演示：http://jsfiddle.net/cH4p4/ && http://jsfiddle.net/LxpQQ/

就像你提到的使用自动完成功能：

"所以我的 textarea 输出将是 "@c#" 并且输入标记输出将是“@[c#]”

HTML

<textarea id='inputbox' placeholder='When @mentions is called its output is put on the input box as well as updated when textarea is blur and submitted'></textarea>
<br/>
<input id="tags" />
<span id="loading" class="hidden">Loading...</span>

Jquery 代码

function split(val) {
    return val.split(/@\s*/);
}

function extractLast(term) {
    return split(term).pop();
}

function getTags(term, callback) {
    $.ajax({
        url: "http://api.stackoverflow.com/1.1/tags",
        data: {
            filter: term,
            pagesize: 5
        },
        type: "POST",
        success: callback,
        jsonp: "jsonp",
        dataType: "jsonp"
    });    
}

$(document).ready(function() {

    $("#inputbox")
    // 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) {
            if (request.term.indexOf("@") >= 0) {
                $("#loading").show();
                getTags(extractLast(request.term), function(data) {
                    response($.map(data.tags, function(el) {
                        return {
                            value: el.name,
                            count: el.count
                        }
                    }));
                    $("#loading").hide();                    
                });
            }
        },
        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
            $("#tags").val("@["+ui.item.value+"]");
            ui.item.value = "@" + ui.item.value;                
            terms.push(ui.item.value);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join("");
            return false;
        }
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>")
            .data("item.autocomplete", item)
            .append("<a>@[" + item.label + "]&nbsp;<span class='count'>(" + item.count + ")</span></a>")
            .appendTo(ul);
    };
});

CSS

span.count { 
    font-style: italic; 
    color: #C0C0C0;
}
.hidden { display: none; }

textarea { width: 300px; height: 100px; resize: none; }

【讨论】：

出了点问题...您不能以多种方式使用它，它只会附加“@[提及]”而不是整个字符串...
嗯，你是什么意思？如果您将使用上面的 jsfiddle 并告诉输入和输出我将进行更改？请输入点数 :)
例如你在 textarea="@android hello @c#" 中输入这个并且在输入框中的值应该是 "@[android] hello @a[c]"...但是你发布的那个是不同的。文本区域为“android hello @c#”，输入框“@[c#]”不更新
啊哈，所以你也想要：如果你在纹理中输入@foobad zoo @C#；输入框应该是@foobad zoo@[C#]是吗？？
Okies 给我 5 分钟，我也许可以在自动完成中做到这一点。

【解决方案3】：

你可以试试下面我们刚刚在GitHub开源的jquery插件：https://github.com/tactivos/jquery-sew

【讨论】：