Javascript jQuery自动完成@提及

我有一个来自Andrew Whitaker的自动完成插件-假设我在

文本区域中有一个字符串

“@peterwateber欢迎”

我想把它输出到一个隐藏的标记中

“@[peterwateber]欢迎”

我该怎么做？我不太擅长Javascript

我已经试着从Hawkee查看了这段代码

正如您所说，上面已经进行了很好的讨论，行为如下：
隐藏标记的值为=@[C#]，文本区域为@C#

乔普，这是个乐于助人的人，让我知道进展如何，干杯！：）

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() {

    $("#tags")
    // 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
            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);
    };
});​

函数拆分（val）{
返回val.split（/@\s*/）；
}
功能提取最后（学期）{
返回拆分（term.pop（）；
}
函数getTags（术语，回调）{
$.ajax({
url:“http://api.stackoverflow.com/1.1/tags",
数据：{
过滤器：术语，
页面大小：5
},
类型：“POST”，
成功：回调，
jsonp：“jsonp”，
数据类型：“jsonp”
});    
}
$（文档）.ready（函数（）{
$（“#标签”）
//选择项目时不要离开选项卡上的字段
.bind（“键控”，函数（事件）{
if（event.keyCode==$.ui.keyCode.TAB&&$（this.data（“自动完成”）.menu.active）{
event.preventDefault（）；
}
}).自动完成({
来源：功能（请求、响应）{
if（request.term.indexOf（“@”）>=0）{
$（“#加载”）.show（）；
getTags（extractLast（request.term）、函数（data）{
响应（$.map（data.tags，function）（el）{
返回{
值：el.name，
伯爵：伯爵
}
}));
$（“#加载”）.hide（）；
});
}
},
焦点：函数（）{
//防止在焦点上插入值
返回false；
},
选择：功能（事件、用户界面）{
var术语=分割（该值）；
//删除当前输入
terms.pop（）；
//添加所选项目
ui.item.value=“@”+ui.item.value；
术语推送（ui.item.value）；
//添加占位符以在末尾获得逗号和空格
术语。推送（“”）；
this.value=terms.join（“”）；
返回false；
}
}).数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“@[”+item.label+”]（“+item.count+”）
.附录（ul）；
};
});​
Hiya工作演示此处：

正如您所说，上面已经进行了很好的讨论，行为如下：
隐藏标记的值为=@[C#]，文本区域为@C#

乔普，这是个乐于助人的人，让我知道进展如何，干杯！：）

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() {

    $("#tags")
    // 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
            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);
    };
});​

函数拆分（val）{
返回val.split（/@\s*/）；
}
功能提取最后（学期）{
返回拆分（term.pop（）；
}
函数getTags（术语，回调）{
$.ajax({
url:“http://api.stackoverflow.com/1.1/tags",
数据：{
过滤器：术语，
页面大小：5
},
类型：“POST”，
成功：回调，
jsonp：“jsonp”，
数据类型：“jsonp”
});    
}
$（文档）.ready（函数（）{
$（“#标签”）
//选择项目时不要离开选项卡上的字段
.bind（“键控”，函数（事件）{
if（event.keyCode==$.ui.keyCode.TAB&&$（this.data（“自动完成”）.menu.active）{
event.preventDefault（）；
}
}).自动完成({
来源：功能（请求、响应）{
if（request.term.indexOf（“@”）>=0）{
$（“#加载”）.show（）；
getTags（extractLast（request.term）、函数（data）{
响应（$.map（data.tags，function）（el）{
返回{
值：el.name，
伯爵：伯爵
}
}));
$（“#加载”）.hide（）；
});
}
},
焦点：函数（）{
//防止在焦点上插入值
返回false；
},
选择：功能（事件、用户界面）{
var术语=分割（该值）；
//删除当前输入
terms.pop（）；
//添加所选项目
ui.item.value=“@”+ui.item.value；
术语推送（ui.item.value）；
//添加占位符以在末尾获得逗号和空格
术语。推送（“”）；
this.value=terms.join（“”）；
返回false；
}
}).数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“@[”+item.label+”]（“+item.count+”）
.附录（ul）；
};
});​
我编写了这里提到的原始代码，并修复了Peter的菜单问题：

我编写了这里提到的原始代码，并修复了Peter的菜单问题：

你好，你是说像这样的事情吗？让我知道如果这有帮助，我会把它作为答案，祝你好运！干杯或者让我知道是否有其他东西会帮助你！“我希望它以隐藏标记的形式输出”是什么意思？@Tats\u绝对是！但问题是我如何输出所选的建议，同时在隐藏标记处，在textarea和隐藏标记中说：“@peterwateber hey！”@[peterwateber]hey！”@codeformer如果textarea的值是=“@peterwateber hello”，那么隐藏标记的值将是“@[peterwateber]hello”Okies，我可能有解决办法