How to use tributejs - 5 common examples

async onLoad() {
      tribute = new Tribute({
        values: await readFriendsListFromCache() || await fetchFriendsList(),
        lookup: 'label',
        fillAttr: 'realname',
        menuItemTemplate(item) {
          const { photo_url } = item.original
          const [ nickname, userid ] = item.string.split(' ')

          // eslint-disable-next-line camelcase
          return `<img src="${photo_url}">${nickname} <small>(${userid})</small>`
        },
        noMatchTemplate: () =&gt; `<li class="no-match"><img src="${unknownUserAvatar}">没有匹配的用户</li>`,
        searchOpts: {
          pre: '<strong>',
          post: '</strong>',
        },
        menuItemLimit: 7,

let userIds = [];
        members.forEach(e => {
            userIds.push(e.memberId);
        });

        let userInfos = wfc.getUserInfos(userIds, groupInfo.target);
        userInfos.forEach((e) => {
            mentionMenuItems.push({
                key: e.displayName,
                value: '@' + e.uid,
                avatar: e.portrait,
                searchKey: e.displayName + pinyin.letter(e.displayName, '', null)
            });
        });

        this.tribute = new Tribute({
            // menuContainer: document.getElementById('content'),
            values: mentionMenuItems,
            selectTemplate: (item) => {
                if (typeof item === 'undefined') return null;
                // if (this.range.isContentEditable(this.current.element)) {
                //     return '<span><a title="' + item.original.email + '" href="http://zurb.com">' + item.original.value + '</a></span>';
                // }
                this.mentions.push({key: item.original.key, value: item.original.value});

                return '@' + item.original.key;
            },
            menuItemTemplate: function (item) {
                return '<img src="' + item.original.avatar + '" height="24" width="24"> ' + item.original.key;
            },
            lookup: (item) =&gt; {
                return item.searchKey;

mounted() {
    const NON_WORD_OR_INTEGER = /\W|^\d+$/;

    this.tribute = new Tribute({
      collection: [
        {
          trigger: '#',
          lookup: value => value.iid + value.title,
          menuItemTemplate: autoCompleteMap[AutoComplete.Issues].menuItemTemplate,
          selectTemplate: ({ original }) => original.reference || `#${original.iid}`,
          values: this.getValues(AutoComplete.Issues),
        },
        {
          trigger: '@',
          fillAttr: 'username',
          lookup: value =>
            value.type === groupType ? last(value.name.split(' / ')) : value.name + value.username,
          menuItemTemplate: autoCompleteMap[AutoComplete.Members].menuItemTemplate,
          values: this.getValues(AutoComplete.Members),
        },

(customRef ? [customRef()] : this.children).forEach((child) => {
      const node = child instanceof Component ? ReactDOM.findDOMNode(child) : child;

      const t = new TributeJS({
        ...realOptions,
      });

      t.attach(node);

      this.tribute = t;

      const listener = this.handleTributeReplaced.bind(this);
      node.addEventListener(
        'tribute-replaced',
        listener
      );
      this.listeners.push(listener);
    });
  }

mention.fetchValues((json) => {
      mention.values = json
      mention.values.unshift({ login_name: 'mentor', name: 'メンター' })
      const collection = [emoji.params(), mention.params()]
      const tribute = new Tribute({
        collection: collection
      })
      tribute.attach(textareas)
    })