jQuery的自動完成@mention

Question

嗨我安德魯·惠特克這個自動完成插件 - DEMO可以說我有一個textarea的

「@peterwateber歡迎」

我一個字符串它要在一個隱藏的標籤輸出

「@ [peterwateber]歡迎」

我應該怎麼做？我不是那種擅長的JavaScript ...

我試着看這個代碼Hawkee

here

Answer 1

我寫的原代碼，這裏提到的，具有固定的菜單問題彼得有：

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

Answer 2

你好工作演示這裏：http://jsfiddle.net/67dxH/

已經有上面商量好了一樣你說的行爲是這樣的：value of the hidden tag as = @[C#] and the textarea as @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); 
    }; 
});​