JQuery.TextnTags插件无法正常工作

问题描述：

我试图实现Facebook和Twitter状态发布文本框，您可以在其中标记您的朋友或页面。在Google上进行了12小时的研究之后，我发现这个http://daniel-zahariev.github.io/jquery-textntags/。这正是我想要的。但是当我试图在JSFiddle上实现它时，它没有奏效。我错过了什么吗？这是我的小提琴代码：JQuery.TextnTags插件无法正常工作

$('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>

该文档说[它需要jQuery和underscore.js]（http://daniel-zahariev.github.io/jquery-textntags/#dependencies），你似乎不包括underscore.js –

谢谢@PatrickEvans我错过了那部分文档。 –

答

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

有两个问题：

的扩展名取决于下划线。 js所以我补充说，没有问题。
扩展取决于$.browser已被弃用。所以我硬编码$.browser为webkit是真实的，像这样：

$.browser = {webkit: true}

您将需要使用一个垫片加回$.browser或使用旧版本的jQuery。

非常感谢。我错过了那部分文档。 :) –

JQuery.TextnTags插件无法正常工作

相关推荐