MooContentAssist

MooContentAssist is a javascript library that add a content assist feature to textareas in your webpage.

MooContentAssist is based on MooTools 1.3.1 and works with FireFox, Chrome, Safari, IE7/8.



Details

Author
NKjoep
GitHub
NKjoep/MooContentAssist
Downloads
20763
Category
Forms
Tags
Report
GitHub Issues

Releases


Dependencies

  • core/1.3: all
  • more/1.3: all (sorry I should investigate about which More classes are needed.)

How to use

1-You need a textarea with the html id, example:

<textarea id="myeditor">
    Lorem Ipsum
</textarea>

2-Then include the MooContentAssist.js and CSS (and MooTools if you already haven't)

<link type="text/css" rel="stylesheet" href="MooContentAssist.css" />
<script src="js/lib/mootools-core-1.3.1-full-nocompat.js"></script>
<script src="js/lib/mootools-more-1.3.1.1.js"></script>
<script src="Source/MooContentAssist.js"></script>

3-Istantiate a new MooContentAssist

<script type="text/javascript>
    window.addEvent("domready",function(){
        var editorAssisted = new MooContentAssist( {
            "source": document.id("myeditor"),
            "vocabulary" : {
                "key0": null,
                "key1": ["subkey1","subkey2","subkey3"],
                "key2": {
                    "subsubkey1": null,
                    "subsubkey2": ["a","b","c"],
                    "subsubkey3": {
                        "a": null,
                        "b": ["1","2","3"]
                    }
                }
            }
        });
    });
</script>

Features

  • Configurable results window style
  • Configurable vocabulary object/namespace
  • Full working with FireFox, Chrome/Chromium, Safari, IE7/8

Parameters Options Mandatory

  • source - default: null
  • vocabulary - default: null

Parameters Options Extra

  • frameSize - default: 3
  • animationDuration - default: 75
  • vocabularyDiscoverer - default: true
  • vocabularyUrl - default: null
  • vocabularyUrlParam - default: "ns"
  • vocabularyUrlMethod - default: "get"
  • windowPadding - default: {x: 0 y: 5}
  • itemType - default: "li"
  • itemsContainerType - default: "ul"
  • matchedTextItemType - default: "span"
  • aggressiveAssist - default: true
  • namespaceAllowed - default: ["()", "$"]
  • css.item - default: "item"
  • css.itemsContainer - default: "itemsContainer"
  • css.itemSelected - default: "itemSelected"
  • css.messageItem - default: "message"
  • css.matchedText - default: "matched"
  • labels.nothingFound - default: "Nothing was found."
  • labels.ajaxError - default: "Error while retrieving data."
  • vocabularyManager_Render - default: function(obj) {
  • vocabularyManager_Extract - default: function(namespace,vocabulary) {
  • vocabularyManager_GetVocabulary - default: function(namespace) {

Eeverything works if you give the right json words object.

Use this as root:

vocabulary: {
    "key1": 
    "key2": 
    "key3":
}

If the key doesn't have sub-keys you must use an array with strings:

"key_without_subkeys": ["word1","word2","word3"]

If the key has sub-keys you must use objects:

"key_with_subkeys": {
    "subkey1": ["word","word","word"],
    "subkey2": ["word","word","word"],
    "subkey3": ["word","word","word"]
}

Obviously you could have infinite sub-levels :)

Please see index.html in the git repo if you need a working example. :)


Changelog

  • 14 Mar 2011 v.080.3 - namespace parser, fixed "charAt()" problem with IE7
  • 08 Mar 2011 v.080.2 - namespace parser, now with allowed chars (or strings) in the namespace
  • 08 Mar 2011 v.080.1 - configurable items container inside the main box
  • 06 Mar 2011 v.080 - MooTools 1.3, several bugfixing, internal API rewritten.* 01 Jul 2010 v0.70.4 - converter from xml to words object, fixed bug on foundlist, fixed bug on assist window position
  • 27 Jun 2010 v0.70 - theme changer, new demo with theme toggler
  • 11 Jun 2010 v0.70 - configurable number of item shown in the box
  • 10 Jun 2010 v0.70 - scrollable result box, scrollable result box shows always the current item in the middle
  • 04 Jun 2010 v0.68 - few standard methods for positioning, css rules methods
  • 24 May 2010 v0.68 - fixed textarea scroll when inserting keywords, fixed assistWindow position
  • 23 May 2010 v0.66 - first dot fixed, occurence text highlight fixed, animation now is a parameter
  • 22 May 2010 v0.64 - ie7 fixes
  • 21 May 2010 v0.63 - added events "click" and "over" to the shown items, when showing assistWindow first item is already selected, added "." trigger
  • 21 May 2010 v0.60 - added styles for items, window positioning
  • 20 May 2010 v0.55 - fixed textarea events
  • 16 May 2010 v0.25 - fixed words data structure
  • 15 May 2010 v0.15 - added completed text, events and keys
  • 13 May 2010 v0.0 - hello word

Screenshots


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus