What is a tag?
Tags are good for describe something with simple words or phrases. These words, the tags label the meaning of the described thing.
E.g.: The something should be a picture with a dog. In this case the tags are the following: "dog, picture, animal, nature"
What is this script?
When you type a character or an expression into the input field, the script will suggest the tags which begin the typed expression. If you press enter or you click on a tag, the firstly selected or the clicked tag will be inserted into the input field.
With up and down keys you can navigate among the suggested tags. (Function still does not work in Opera browser).
If you press PageUp or PageDown, then the selection will jump more than one item (see the configuration).
Define the list of the tags
In the init function you can find an array named tags. You must enumerate here the tags, which are still defined.
<script type="text/javascript">
tags = Array('aa','aal', 'aalii', 'aam', 'aani')
</script>
inline
[true/false] you can change the layout of the suggested tags. If true, the suggested tags will be list items, otherwise tags are only enumerated.
You can define this variable out of init function. In this case you must delete or comment it in init function.
inline and the CSS:
You must place the input field and suggestion div into another div with relative position.
The suggestion div must be positioned into absolute position:
absolute and has a top: xx margin. xx must equal to the height of div + borders.
The suggestion's width must be empty, so it will same width than longest tag.
maxSug:
[number] maximize the number of the suggested tags.
It works with the true option of inline variable.
You can define this variable out of init function. In this case you must delete or comment it in init function.
maxSugOutline:
[true/false] It works with the false option of inline variable and a maxSug number. The suggested tags appears only in one row with limited number of results. You can define this variable out of init function. In this case you must delete or comment it in init function.
inp:
[$('string')] define the tags input filed. format: inp = $('id_of_input_field')
sug:
[$('string')] define the html element where the suggestions will be placed to. format: sug = $('id_of_suggested_tags_container')
selClass:
[string] Define the class name of the selected tags. You can define this variable out of init function. In this case you must delete or comment it in init function.
jump:
[number] number of jumps when you press PageDown or PageUp. You can define this variable out of init function. In this case you must delete or comment it in init function.
Start using the script
Set up the init function with the default properties:
- tags list
- display mode: inline, maxSug, maxSugOutline, jump
- Define the necessary global variables: oldCont, oldContArr, newContArr
- Hide the suggested tags object
- add the keyup event to the input field, which makes the comparison between the the status of input value before and after the key pressing.
How does the script work?
When the keyup event is in action, the tagger function will start. The tagger will start the keyhandler function, which checks the pressed key.
If keyhandlers returns true, then the compare function will check that the input's current value same as the value which was before the event.
If compare returns false, so not equal, then the list of tags will appear on the screen:
- diff global variable of the grepKul function earns the difference between the value of the input before and after the event.
- sugs will have the suggested tags in an array, which is filtered by the createSuggestion function
- sugsInHTML generates suggested tags in html format or gets a false value. In case of false value the suggestions div will be hidden, and the program will exit.
sugsToHTML:
Generates a html code from tags or returns false.
If inline variable's value is true, the code will be a list.
It assigns the onclick event to tags, so when you click on one of them, the addSugToInput function will run.
keyhandler:
Gets the difference between pressed key from their keycode.: enter, up, down, page up, page down:
- up, down: you can navigate between the suggested tags. When you press a key, only change the class of the tags. In Opera browser it still not working..
- PageUp PageDown:Same as up, down, but jump more tags. Number of jump is the value of the jump variable.
changeFocus class:
- Set the 'selected' class in the suggested tag's div
- down: Set the 'selected' class to the next tag
- up: Set the 'selected' class to the previous tag
enter:
addSugToInput(selected()) the selected tag will be inserted into the input field
selected function: returns the first suggested tag object, which have selected class
compare:
compares the value of input between and after the keyup event
Sets up the newCont to the input's current value, then compares it with the oldCont which value were generated on window.load or the previous keyup event.
If the comparison is not equal - something changed in the input field (you typed something) -, then the function will return true.
The oldCont value is updated to the inputs current value. If there is no change, then the function will return false,
but the variables will be updated.
grepKul:
filters the difference between the event status before and after. Returns the difference or has value false.
createSuggestion:
filters the suggested tags from the tags array (it contains all previously defined tag).
- regEx define a regular expression, which match the difference which is on the begin of the words.
- ts previously defined tags
If option is set to inline or maxSugOutline filter has limited tags, then the limit will be stored in maxSug variable.
The filtered tags are pushed into the suggestions array, then the function will return the suggestion array or false value.
The function will have false value if there is only one suggested tag or the suggestion equals with the difference or there is no suggested tag.
sugsToHTML:
Generates html format to the tags.
The inline and maxSugOutline variables affects the layout.
If inline option is true, every tag will be inserted into list, else only a space char will inserted after all of them.
dispSug class:
- hides the object, which contains the suggested tags.
- shows the object, which contains the suggested tags.
addSugToInput:
Inserts the selected tag into the input field, deletes the diff object, hides the suggestion div and refreshes the values of oldCont and oldContArr variables.
- Inserts the content of o object (innerHTML, which is the tag) into the difference's index.
newContArr[diff.index] = o.innerHTML;
- ns Converts the newContArr into string and replace the commas to space.
- Refreshes the value of the input field.