JQuery.TextnTags插件無法正常工作

Question

我試圖實現Facebook和Twitter狀態發佈文本框，您可以在其中標記您的朋友或頁面。在Google上進行了12小時的研究之後，我發現這個http://daniel-zahariev.github.io/jquery-textntags/。這正是我想要的。但是當我試圖在JSFiddle上實現它時，它沒有奏效。我錯過了什麼嗎？這是我的小提琴代碼：

$('textarea.tagged_text').textntags({ 
 
    onDataRequest: function(mode, query, triggerChar, callback) { 
 
    var data = [{ 
 
     id: 1, 
 
     name: 'Daniel Zahariev', 
 
     'img': 'http://example.com/img1.jpg', 
 
     'type': 'contact' 
 
    }, { 
 
     id: 2, 
 
     name: 'Daniel Radcliffe', 
 
     'img': 'http://example.com/img2.jpg', 
 
     'type': 'contact' 
 
    }, { 
 
     id: 3, 
 
     name: 'Daniel Nathans', 
 
     'img': 'http://example.com/img3.jpg', 
 
     'type': 'contact' 
 
    }]; 
 

 
    query = query.toLowerCase(); 
 
    var found = _.filter(data, function(item) { 
 
     return item.name.toLowerCase().indexOf(query) > -1; 
 
    }); 
 

 
    callback.call(this, found); 
 
    } 
 
});

.textntags-wrapper { 
 
    position: relative; 
 
    background: #fff; 
 
} 
 
.textntags-wrapper textarea { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    display: block; 
 
    height: 18px; 
 
    padding: 9px; 
 
    margin: 0; 
 
    border: 1px solid #dcdcdc; 
 
    border-radius: 3px; 
 
    overflow: hidden; 
 
    background: transparent; 
 
    outline: 0; 
 
    resize: none; 
 
    font-family: Arial; 
 
    font-size: 13px; 
 
    line-height: 17px; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
@-moz-document url-prefix() { 
 
    .textntags-wrapper textarea { 
 
    padding: 9px 8px; 
 
    } 
 
} 
 
.textntags-wrapper .textntags-tag-list { 
 
    display: none; 
 
    background: #fff; 
 
    border: 1px solid #b2b2b2; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 10000; 
 
    margin-top: -2px; 
 
    border-radius: 5px; 
 
    border-top-right-radius: 0; 
 
    border-top-left-radius: 0; 
 
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.148438); 
 
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.148438); 
 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.148438); 
 
} 
 
.textntags-wrapper .textntags-tag-list ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.textntags-wrapper .textntags-tag-list li { 
 
    background-color: #fff; 
 
    padding: 0 5px; 
 
    margin: 0; 
 
    width: auto; 
 
    border-bottom: 1px solid #eee; 
 
    height: 26px; 
 
    line-height: 26px; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
    list-style: none; 
 
    white-space: nowrap; 
 
} 
 
.textntags-wrapper .textntags-tag-list li:last-child { 
 
    border-radius: 5px; 
 
} 
 
.textntags-wrapper .textntags-tag-list li > img, 
 
.textntags-wrapper .textntags-tag-list li > div.icon { 
 
    width: 16px; 
 
    height: 16px; 
 
    float: left; 
 
    margin-top: 5px; 
 
    margin-right: 5px; 
 
    -moz-background-origin: 3px; 
 
    border-radius: 3px; 
 
} 
 
.textntags-wrapper .textntags-tag-list li em { 
 
    font-weight: bold; 
 
    font-style: none; 
 
} 
 
.textntags-wrapper .textntags-tag-list li:hover, 
 
.textntags-wrapper .textntags-tag-list li.active { 
 
    background-color: #f2f2f2; 
 
} 
 
.textntags-wrapper .textntags-tag-list li b { 
 
    background: #ffff99; 
 
    font-weight: normal; 
 
} 
 
.textntags-wrapper .textntags-beautifier { 
 
    position: relative; 
 
    padding: 10px; 
 
    color: #fff; 
 
    white-space: pre-wrap; 
 
    word-wrap: break-word; 
 
} 
 
.textntags-wrapper .textntags-beautifier > div { 
 
    color: #fff; 
 
    white-space: pre-wrap; 
 
    width: 100%; 
 
    font-family: Arial; 
 
    font-size: 13px; 
 
    line-height: 17px; 
 
    min-height: 17px; 
 
} 
 
.textntags-wrapper .textntags-beautifier > div > strong { 
 
    font-weight: normal; 
 
    background: #d8dfea; 
 
    line-height: 16px; 
 
} 
 
.textntags-wrapper .textntags-beautifier > div > strong > span { 
 
    filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://daniel-zahariev.github.io/jquery-textntags/jquery-textntags.js"></script> 
 
<textarea class='tagged_text'></textarea>

Answer 1

我能得到它的工作在這裏：http://jsfiddle.net/6205ef8j/1/

有兩個問題：

1. 的擴展名取決於下劃線。 js所以我補充說，沒有問題。
2. 擴展取決於$.browser已被棄用。所以我硬編碼$.browser爲webkit是真實的，像這樣：

$.browser = {webkit: true}

您將需要使用一個墊片加回$.browser或使用舊版本的jQuery。