You are here: TWiki> Plugins Web>AutoCompletePlugin (2009-04-10, PeterThoeny)
Tags:
ajax1Add my vote for this tag forms2Add my vote for this tag twiki_application2Add my vote for this tag usability2Add my vote for this tag user_interface2Add my vote for this tag create new tag
, view all tags

AutoCompletePlugin

This plugin allows you to create an autocomplete input field based on Yahoo's User Interface Library.

All this plugin does is implement Arthur Clemens' TWiki:Plugins/AutoCompleteAddOn as a plugin, which allows users to provide an autocomplete text box using the %AUTOCOMPLETE% syntax, and also in TWikiForms (shown below).

screenshot.png

Usage

Before you can use this plugin, you need to set up some data for the autocomplete. Examples can be found at AutoCompletePluginTestData.

In Topics and Templates

This plugin expands the %AUTOCOMPLETE{...}% variable, which takes the parameters described in AutoCompletePlugin#Parameters.

In TWikiForms

To use this plugin in TWikiForms, create a form template as descibed in TWikiForms#Defining_a_Form. This plugin adds the autocomplete type of field. To pass the parameters required by the plugin, place them in the Values column. An example is shown below:

Name Type Size Values Tooltip message Attributes
Username autocomplete 25em datatopic="Sandbox.AutoCompletePluginTestData" datasection="usernames" delimchar="," itemformat="item[0] + ' (' + item[1] + ')'"    

You can use many of same attributes as you would in topics, except the following:

  • name
  • size
  • value
  • class
  • formname

Parameters

Parameter Comment Default Example
name A unique name for the textfield required name="users"
datatopic The topic with data. Should be formatted as comma-separated string, or as an array of arrays (see AutoCompletePluginTestData#usernames for an example). Use with datasection. required datatopic="Sandbox.AutoCompletePluginTestData"
datasection The topic section with data. Use with datatopic. required datasection="usernames"
size The width of the input field in em or px. 20em size="20em" or size="200px"
value Default value of the input field none value="AutoCompletePlugin"
tabindex The tabindex of the textfield none tabindex="2"
class Name of css class to add to the input field none class="twikiInputField"
formname Name of the form which the input field is part of none form="userlist"
itemformat The format of an item string in the autocomplete list. Use if the autocomplete list should display different names than the input field - for instance with full person names. The javascript input argument is item. item itemformat="item[0] + ' (' + item[1] + ')'"
delimchar Used to accept multiple delimeted queries. none delimchar=","
onblur, onfocus, onchange, onselect, onmouseover, onmouseout Javascript parameters for the textfield. none onfocus="twiki.Form.clearBeforeFocusText(this);"
itemselecthandler Defines a javascript function to be executed when an item is selected. See http://developer.yahoo.com/yui/autocomplete/#customevents. none itemselecthandler="submitJumpForm"

Example

If installed, the following should create an jump box (TWiki 4.2):

Source:

<script type="text/javascript">
var SubmitJump = function(sType, aArgs) {
    document.myJumpForm.submit();
}
</script>
<form name="myJumpForm" action="%SCRIPTURLPATH{"view"}%/%BASEWEB%/%BASETOPIC%">%AUTOCOMPLETE{name="topic" datatopic="Sandbox.AutoCompletePluginTestData" onfocus="twiki.Form.clearBeforeFocusText(this);" onblur="twiki.Form.restoreBeforeFocusText(this);" datasection="topiclist" value="Jump" formname="myJumpForm" class="twikiInputField twikiInputFieldBeforeFocus"  itemselecthandler="SubmitJump" size="128px" }%</form>

Rendered:

%AUTOCOMPLETE{name="topic" datatopic="Sandbox.AutoCompletePluginTestData" onfocus="twiki.Form.clearBeforeFocusText(this);" onblur="twiki.Form.restoreBeforeFocusText(this);" datasection="topiclist" value="Jump" formname="myJumpForm" class="twikiInputField twikiInputFieldBeforeFocus" itemselecthandler="SubmitJump" size="128px" }%

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server where TWiki is running.

Like many other TWiki extensions, this module is shipped with a fully automatic installer script written using the BuildContrib.

  • If you have TWiki 4.2 or later, you can install from the configure interface (Go to Plugins->Find More Extensions)
  • If you have any problems, then you can still install manually from the command-line:
    1. Download one of the .zip or .tgz archives
    2. Unpack the archive in the root directory of your TWiki installation.
    3. Run the installer script ( perl <module>_installer )
    4. Run configure and enable the module, if it is a plugin.
    5. Repeat for any missing dependencies.
  • If you are still having problems, then instead of running the installer script:
    1. Make sure that the file permissions allow the webserver user to access all files.
    2. Check in any installed files that have existing ,v files in your existing install (take care not to lock the files when you check in)
    3. Manually edit LocalSite.cfg to set any configuration variables.

Plugin Files

File: Description:
data/TWiki/AutoCompletePlugin.txt Documentation
lib/TWiki/Plugins/AutoCompletePlugin.pm Perl module
data/Sandbox/AutoCompletePluginTestData.txt Test Data
pub/TWiki/AutoCompletePlugin/AutoCompletePluginScreenshot.png Screenshot
lib/TWiki/Plugins/AutoCompletePlugin/Config.spec Spec file for configure

Plugin Info

Plugin Author(s): TWiki:Main.AndrewRJones
Copyright: © 2007 - 2008, TWiki:Main.AndrewRJones
License: GPL (Gnu General Public License)
Plugin Version: 17504 (12 Sep 2008)
Change History:
12 Sept 2008 Bugs:Item5745 - Updated to use latest YUI (2.5.2); Fixed forms for 4.2; Fixed Jump Form example for 4.2
14585 Bugs:Item4469 - Removed extra self-closing div-tag tail; Fixed Jump Form example
14413 Bugs:Item4369 - Allow users to define their own item select handler
14391 Bugs:Item4356 - Class names not being added
14382 Bugs:Item4346 - Added Javascript parameters ( onblur, onfocus, etc)
14381 Bugs:Item4345 - Was adding 'null' after input if delimchar not set
14379 Bugs:Item4342 - Only sets correct size for one texfield in topic
14290 Bugs:Item4304 - Various bug fixes and enhancements
14277 Bugs:Item4301 - Initial release
Dependencies:
NameVersionDescription
TWiki::Contrib::YahooUserInterfaceContrib >1.0Optional. If not found, will use files served from Yahoo! servers. See http://developer.yahoo.com/yui/articles/hosting/.
Benchmarks: GoodStyle nn%, FormattedSearch nn%, AutoCompletePlugin nn%
Plugin Home: http://twiki.org/cgi-bin/view/Plugins/AutoCompletePlugin
Feedback: http://twiki.org/cgi-bin/view/Plugins/AutoCompletePluginDev
Appraisal: http://twiki.org/cgi-bin/view/Plugins/AutoCompletePluginAppraisal

Related Topics: TWikiPlugins, DeveloperDocumentationCategory, AdminDocumentationCategory, TWikiPreferences

Topic attachments
I Attachment Action Size Date Who Comment
elsemd5 AutoCompletePlugin.md5 manage 0.2 K 2008-12-12 - 11:03 SopanShewale checksum file , Uploaded as a part of Release Process
ziptgz AutoCompletePlugin.tgz manage 17.8 K 2008-12-12 - 11:03 SopanShewale See AutoCompletePlugin for details. Untar and run the installer script, Uploaded as a part of Release Process
zipzip AutoCompletePlugin.zip manage 20.7 K 2008-12-12 - 11:03 SopanShewale See AutoCompletePlugin for details. Unzip and run the installer script , Uploaded as a part of Release Process
pngpng AutoCompletePluginScreenshot.png manage 9.1 K 2007-06-25 - 14:45 AndrewRJones Screenshot
elseEXT AutoCompletePlugin_installer manage 3.8 K 2008-12-12 - 11:03 SopanShewale Installer Script, Uploaded as a part of Release Process
Topic revision: r16 - 2009-04-10 - 21:18:00 - PeterThoeny
 
TWIKI.NET
This site is powered by the TWiki collaboration platform
Ideas, requests, problems regarding TWiki? Send feedback
Copyright © 1999-2009 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.