 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
VegUISiteKit - Using the Autocomplete Library
written by vegu on 23 Nov, 2007 08:11:56
The VSK Autocomplete library allows you to add a customizeable auto-complete feature to one or more text input elements on your page.It supports traditional auto-completion, where the feature is applied to the whole value in the text box as well as tag based auto-completion, which means that the feature is triggered individually for each tag.
So let's get started.
In order to use this library you will also need to include the VSK Form Tools and VSK Core libraries. The easiest way to do this is by compiling them all into one file by using our compiled download script.
This is script is fairly simple to set up, first we will need a text input field to apply it to.
code: html<form>
<input type="text" id="mysearch" size="30" />
</form>
Whenever the auto-completion feature will be triggered a list will popup containing partially matching words. The appearance of that list can be styled using simple CSS classes. Note that the css class names need to begin with the node id of the text input element they are linked to, in our case 'mysearch'.
code: css/* The List element itself */
div.mysearch_auco_list {
border: 1px black solid;
padding: 5px;
font: 11px Verdana, Arial;
background-color:#fff;
}
/* Item in the list when not selected */
mysearch_normal { }
/* Item in the list when selected */
mysearch_selected {
background-color: lightblue;
color: darkblue;
}
Now somewhere on the bottom of the page we will add the javascript to make it all work.
code: jsWords = ['apple', 'age', 'ape','orange', 'bus', 'beard', 'banana','pineapple','strawberry'];
vsk_auco_init('mysearch',Words);
The list of words can be fairly long before performance starts bog down. I tested it with up to 1000 words and it still performed okay.
Tag delimiter
The default tag delimiter is set to be the comma character. You can change that to whatever you want by setting the VSK_AUCO_DELIMITER and VSK_AUCO_DELIMITER_RAW variables.
VSK_AUCO_DELIMITER is a regex representation of the delimiter so it can take possible whitepsaces into account. So for the comma character a valid value would be:
code: jsvar VSK_AUCO_DELIMITER = '\\s*,\\s*';
Note that you need to escape the \s.
The VSK_AUCO_DELIMITER_RAW variable needs to hold a raw string representation of the delimiter.
code: jsvar VSK_AUCO_DELIMITER_RAW = ', ';
If you set both variables to NULL then tag-based auto completion will be turned off and traditional auto-completion on the whole value will be used.
Issues with centered input fields
Make sure to always center input fields using the CSS margins and width attributes. Never use the center or text-align tags to center the nodes that hole the text input element, then it should work fine in both Internet explorer and Firefox.
Opera, at the moment, always has trouble as soon as the text input field is located in a centered environment, but hopefully we will be able to fix that in a future patch.
Textareas
The script also functions flawlessly on text areas in firefox. Internet explorer has some problems, and the list will also be displayed starting from the lower left corner of the text area, but its still functional.
Related Posts
- No related posts
Your Comment
Comments
No comments yet.
