Piyush commented on a Page, Triggered @mention Autocomplete like Facebook, Twitter & Google+ - Mar 21, 2013

After wasting a day on buggy jquery -input-mentions i found this working perfectly. Modified it for multi-trigger for my need. Here is quick hack with least possible change in existing code as others are also interested in it.
Add one more option at line 20
triggerArray: new Array('@','#'),

Add these in search function after assignment of variable at line 144 above

var triggerIndex = $.map(this.options.triggerArray,function(val,i){
return contents.lastIndexOf(val);
});
this.options.trigger = this.options.triggerArray[triggerIndex.indexOf(Math.max.apply(window,triggerIndex))];

Now request will be initiated at each element in triggerArray.

8 Responses

Hawkee - Mar 21, 2013

Great addition. How do you configure each dataset for each trigger?

Piyush - Mar 25, 2013

I think that won't be much of a problem. Passing an array of source on key value of trigger will do. Eg source: array('#'=>'/getHashTags' , '@'=>'getUserNames'). Then selecting the appropriate source in _initsource function.

Piyush - Mar 25, 2013

Hey i am facing an error when trying your this plugin with latest jquery ui and css bundle v 1.10.2. When traversing the items on autocomplete, error is throw at this line
if ( this.menu.first() && /^previous/.test(direction) [line 127]
Uncaught TypeError: Object [object Object] has no method 'first'
Any fix for that ?

Hawkee - Mar 25, 2013

This hasn't been tested with jQuery UI 1.9 or 1.10 so there will likely be errors. It's currently only supported on 1.8.

Piyush - Mar 25, 2013

Perhaps that is because of use of some jquery internal function. You should probably consider it remaking it w/o touching internal functions. Anyways after commenting this section of code
if ( this.menu.first() && /^previous/.test(direction) ||
this.menu.last() && /^next/.test(direction) ) {
this.menu.deactivate();
return;
}

everything seems to work fine. What exactly this part is doing ?
Currently i am adding one more feature to this plugin. Will update it once i am finished with it.

despotbg - May 07, 2013

Is there any chance to get multi-trigger soon? I need to have each dataset for each trigger :(

cgallegu - May 23, 2013

Add a "sources" property to the options in the following format: {"#" : 'url1', "@": 'url2'}.
Then modify your search function as following

var contents = this.element.val();
var cursorPos = this.getCursor();
var triggerIndex = $.map(this.options.triggerArray,function(val,i){
return contents.lastIndexOf(val);
});
this.options.trigger = this.options.triggerArray[triggerIndex.indexOf(Math.max.apply(window,triggerIndex))];
//Added for multi trigger datasource
if (this.options.sources !== undefined) {
this.options.source = this.options.sources[this.options.trigger];
this._initSource();
}

UIdezigner - Jul 12, 2013

For the lines that Piyush commented out..... user should replaced with the following to work with jquery-ui 1.9.

if ( this.menu.isFirstItem() && /^previous/.test(direction) ||
this.menu.isLastItem() && /^next/.test(direction) ) {
this._value( this.term );
this.menu.blur();
return;
}

hooo wa !
PS.
this part allows navigation with arrow keys once menu in displayed.