TinyMCE-Autocomplete-Plugin: A JavaScript repository from pedroteixeira

AutoComplete for TinyMCE provides inline autocomplete in a style similar to Twitter or Facebook. The text you type in tinyMCE is checked against a list of specified options; if there is a match then you will see them appear in a list underneath the caret. This plugin was originally designed for PriorityCentre, a task and meeting management application developed by Mijura (https://mijura.com).

This plugin has been tested in Firefox, Chrome, Safari and Internet Explorer 9. It currently does not support IE7/8.

Screenshot

Requirements

Autocomplete requires TinyMCE with the jQuery package, available for download here: http://www.tinymce.com/download/download.php

Autocomplete options

There are four parameters that need to be specified in your tinyMCE config:

autocomplete_delimiters - A CSV list of delimiters (ASCII codes) on which to split text entered into tinyMCE. In most cases you will want to split text by spaces, in which case you would specify '160,32'. 32 is a normal space and 160 is   (which is commonly used by tinyMCE). Whichever delimiter you specify first will be inserted after you select an option. The default is '160,32' for spaces.
autocomplete_options - A CSV list OR Javascript Object "options".
1. A CSV List like "john,jane,william"
2. JSON-like "options" array of objects havaing a key and a description ( both visible to user key and description, key is only used for autocomplete features ) "options": [ { "key": "Attila", "description": "- The Great Hun" } ]
autocomplete_trigger - You can specify a trigger character that must be type immediately before searching for options. The default trigger is '@'
autocomplete_end_option - Any text that you want to be added after the option. The caret will be placed between the option and this ending text. For example, you could specify 'end', in which case selecting an autocomplete option would insert: '@jane @end' with the caret placed in between (and including the trigger before the end option).

Configuration with TinyMCE

Copy the autocomplete folder (in src) to the plugins directory of your TinyMCE installation.

Include the autocomplete plugin in your TinyMCE configuration, this might look like:

plugins : "autolink,lists,pagebreak,style,layer,advlink,emotions,advlist,autocomplete",

Add the configuration options for the autocomplete plugin, e.g.:

// Required
autocomplete_options: "john,jane,william", 

OR (if you prefer showing description along the keys)

autocomplete_options: {
						"options": [
							{
								"key": "Attila",
								"description": "- The <i>Great</i> Hun <hr /> <iframe src=\"http://farm4.staticflickr.com/3451/3233621766_e4f6db7a22_m.jpg\"></iframe>"
							},
							{
								"key": "Kattila",
								"description": "/ The Great B<b>um</b>"
							},
							{
								"key": "JustKey",
								"description": "* Just a <a href=\"http://twitter.com/enersizetech\">link</a>"
							}
						]
 					  },
// Optional
autocomplete_delimiters: "160,32",		// Optional and this is the default 
autocomplete_trigger: "@",			// Optional and this is the default
autocomplete_end_option: "end",			// Optional and by default no ending text is inserted

Include (and customize) the CSS in src/styles/autocomplete.css on the page with your TinyMCE installation.

Support

You are welcome to use this plugin at your own risk. It is currently being maintained on GitHub where you can submit issues / feature requests.

License

Open Source Initiative OSI - The MIT License (MIT):Licensing

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.