- PeopletagAutocomplete: function() {
- $('.form_tag_user #tags').tagInput({
- tags: SN.C.PtagACData,
- tagSeparator: " ",
- animate: false,
- formatLine: function (i, e, search, matches) {
- var tag = "<b>" + e.tag.substring(0, search.length) + "</b>" + e.tag.substring(search.length);
-
- var line = $("<div/>").addClass('mode-' + e.mode);
- line.append($("<div class='tagInputLineTag'>" + tag
- + " <em class='privacy_mode'>" + e.mode + "</em></div>"));
- if (e.freq)
- line.append("<div class='tagInputLineFreq'>" + e.freq + "</div>");
- return line;
+ /**
+ * Called when a people tag edit box is shown in the interface
+ *
+ * - loads the jQuery UI autocomplete plugin
+ * - sets event handlers for tag completion
+ *
+ */
+ PeopletagAutocomplete: function (txtBox) {
+ var split = function (val) {
+ return val.split( /\s+/ );
+ }
+ var extractLast = function (term) {
+ return split(term).pop();
+ }
+
+ // don't navigate away from the field on tab when selecting an item
+ txtBox.on( "keydown", function ( event ) {
+ if ( event.keyCode === $.ui.keyCode.TAB &&
+ $(this).data( "autocomplete" ).menu.active ) {
+ event.preventDefault();
+ }
+ }).autocomplete({
+ minLength: 0,
+ source: function (request, response) {
+ // delegate back to autocomplete, but extract the last term
+ response($.ui.autocomplete.filter(
+ SN.C.PtagACData, extractLast(request.term)));
+ },
+ focus: function () {
+ return false;
+ },
+ select: function (event, ui) {
+ var terms = split(this.value);
+ terms.pop();
+ terms.push(ui.item.value);
+ terms.push("");
+ this.value = terms.join(" ");
+ return false;
+ }
+ }).data('autocomplete')._renderItem = function (ul, item) {
+ // FIXME: with jQuery UI you cannot have it highlight the match
+ var _l = '<a class="ptag-ac-line-tag">' + item.tag
+ + ' <em class="privacy_mode">' + item.mode + '</em>'
+ + '<span class="freq">' + item.freq + '</span></a>'
+
+ return $("<li/>")
+ .addClass('mode-' + item.mode)
+ .addClass('ptag-ac-line')
+ .data("item.autocomplete", item)
+ .append(_l)
+ .appendTo(ul);