jQuery - Tag a Friend 2

jQuery - Tag a Friend 2 is a jQuery plugin that can turn any html input in to a facebook like post box.

How it works

Simply call tagfriends2 on any text input element and it will turn your element in to a taggable component. tagfriends2 adds an editable DIV before the element and keeps the original element on the document, making it possible for you to submit a form with ease. The plugin uses Rangy to maintain cross-browser consistancy with js ranges.

The output string will be rendered on to the original elements. The output text template can be customized.

Dependencies

The following js fils and styles should be included.

If including Rangy seperately:

<link rel="stylesheet" href="tag.a.friend.2.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="rangy-core.js"></script>	
<script type="text/javascript" src="jquery.tag.a.friend.2.min.js"></script>

You may also use the Rangy included version

<link rel="stylesheet" href="tag.a.friend.2.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tag.a.friend.2.rangy.min.js"></script>

Demos

Basic Usage

The url must be passed for tagfriends2 to work.

$('#postbox1').tagfriends2({
	url:'\data.json',
	placeholder:'Type something'
});	
	

				
			
			
		

	

	
	
Suggestions list templating

	
Suggetions list can be customized using a template.

	

		

	
$('#postbox2').tagfriends2({
	url:'\data.json',
	placeholder:'Type something',
	sugTpl:'
  • {text}
    • '
});	
	
    			
		
    
		
    
			
			
						
		
    
	
    

    

    
	
    Parameters
    
	
    
		
    
			url
			Url to ajax fetch the data from
		
    
		
    
			tagFormat
			Template to format the resulting code using the selected ta. [@%?] will become [@some_unique_id]
		
    
		
    
			allowDuplicates
			True/False to allow or deny from adding the same tag more than once.
		
    
		
    
			onScrape
			Callback function to run when the user pastes a web url.
		
    
		
    
			onUpdate
			Callback function to run on each textbox update.
		
    
		
    
			sugTpl
			Templte to render each suggetion. The template must begin and end with <li> tags.
		
    
		
    
			extraClass
			Extra class(es) to be added to the tagger box.
		
    	
		
    
			tagClass
			Extra class(es) to be added to each tag.
		
    	
		
    
			suggClass
			Extra class(es) to be added to the suggestions list.
		
    		
		
    
			placeholder
			Text area placeholder.
		
    																
	
    	

    

    
	
    Methods
    
	
    Methods can be called on tagfriends2
    
	
    $('#postbox2').tagfriends2('refresh');	
	
    
	
    
		
    
			refresh
			Refresh the code for the tagbox
		
    
		
    
			value
			Returns the code for the tagbox
		
    
		
    
			clear
			Clear all values
		
    		
		
    
			clearUrl
			Clear the url value on the tagbox so another url could be fetch when pasted.
		
    
		
    
			focus
			
		
    
		
    
			blur