Плагин JQuery.TextnTags не работает

Question

Я пытаюсь реализовать текстовое поле для публикации в Facebook и Twitter, в котором вы можете пометить своих друзей или страницы. После 12-часового исследования в Google я нашел это 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.