Tags:
ajax2Add my vote for this tag automation1Add my vote for this tag forms3Add my vote for this tag twiki_application1Add my vote for this tag usability1Add my vote for this tag user_interface3Add my vote for this tag create new tag
, view all tags

Autocomplete Add-on

NOTE: This add-on is no longer maintained and is superseded by the AutoCompletePlugin.

Autocomplete input field based on Yahoo's User Interface Library (available through TWiki:Plugins/YahooUserInterfaceContrib).

autocomplete_example.png

Usage

Write the following INCLUDE in your topic:
%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="autocomplete"}%
This will put an input field in your topic, but without autocomplete suggestions. You also need to pass data parameters: see the following section.

Parameters

Parameters to pass to the INCLUDE variable, for example:
%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="autocomplete" name="topics"}%

Parameter Required Description Default Example
datatopic required The topic with data. Should be formatted as comma-separated string, or as an array of arrays (see Sandbox.AutoCompleteTestData#usernames for an example). Use with datasection. none datatopic="Sandbox.AutoCompleteTestData"
datasection required The topic section with data. Use with datatopic. none datasection="usernames"
formweb   The web reference in the form action. %BASEWEB% formweb="%MAINWEB%"
formtopic   The topic reference in the form action. %BASETOPIC% formtopic="%HOMETOPIC%"
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] + ')'"
name   A unique name is only needed if more than one autocomplete form is on the page. none name="topics"
inputname   The name of the input field. none inputname="username"
charsize   The character width of the input field. none charsize="40"
size   The width of the input field in em or px. 20em sizse="20em" or size="200px"

Customization

The include section autocomplete writes the default parts: form, stylesheet and javascript. If you want to make changes to either one, include the sections separately and provide your own includes.

Separate sections

%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="form" name="my"}%
%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="stylesheet" name="my"}%
%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="javascript" name="my" datatopic="Myweb.MyDataTopic" datasection="mysection"}%

Customized section example

%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="form" name="my"}%
%INCLUDE{"Myweb.MyTopic" section="stylesheet" name="my"}%
%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="javascript" name="my" datatopic="Myweb.MyDataTopic" datasection="mysection"}%

Example

%INCLUDE{
"%TWIKIWEB%.AutoCompleteAddOn"
section="autocomplete"
name="example"
inputname="topic"
size="25em"
datatopic="Sandbox.AutoCompleteTestData"
datasection="topics"
topicsweb="%TWIKIWEB%"
}%

Generates:

Warning: Can't find topic TWiki06x00.AutoCompleteAddOn

This topic uses TWiki:Plugins/VarCachePlugin to cache search results.

Using autocomplete in a template

This is an customized login template (TWiki 4.2) to let users just enter their name to log in (the password is the same for everyone).

This example shows where to place the INCLUDE sections

%TMPL:INCLUDE{"login"}%

%TMPL:DEF{"templatescript"}%
<script type="text/javascript">
//<![CDATA[
   twiki.Event.addLoadEvent(initForm, true);
   function initForm() {
      document.loginform[0].focus();
   }
//]]>
</script>
%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="javascript" name="login" datatopic="Sandbox.AutoCompleteTestData" datasection="usernames" itemformat="item[0]"}%%TMPL:END%

%TMPL:DEF{"templatestyle"}%%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="stylesheet" name="login"}%%TMPL:END%

%TMPL:DEF{"LOG_IN_BANNER"}%%MAKETEXT{"Log in"}%%TMPL:END%
%TMPL:DEF{"authrealm"}%%TMPL:END%

%TMPL:DEF{"usernamestep"}%<div class="twikiFormStep">
---+++ %MAKETEXT{"Please enter your name"}%

%INCLUDE{
"%TWIKIWEB%.AutoCompleteAddOn"
section="input"
name="login"
inputname="username"
charsize="40"
datatopic="Sandbox.AutoCompleteTestData"
datasection="usernames"
topicsweb="%MAINWEB%"
}%<input type="hidden" name="password" value="twiki" />
</div><!-- /twikiFormStep-->%TMPL:END%

%TMPL:DEF{"passwordstep"}%%TMPL:END%

Include sections

Convenience include 'autocomplete'

Includes form, stylesheet and javascript.

Usage:

%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="autocomplete"}%

%STARTSECTION{"autocomplete"}%%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="form"}%
%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="stylesheet"}%
%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="javascript"}%%ENDSECTION{"autocomplete"}%

Partial includes

form, input

Includes form only. This section includes a nested section named input.

Usage:

%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="form"}%

To use the input field only (for instance when you have a custom form):

%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="input"}%

%STARTSECTION{"form"}%<form action="%SCRIPTURLPATH{"view"}%/%IF{"defined formweb" then="%formweb%" else="%BASEWEB%"}%/%IF{"defined formtopic" then="%formtopic%" else="%BASETOPIC%"}%" autocomplete="off">%STARTSECTION{"input"}%<div id="%IF{"defined name" then="%name%"}%autocompleteForm">
<input id="%IF{"defined name" then="%name%"}%autocompleteInput" class="twikiInputField" type="text" name="%IF{"defined inputname" then="%inputname%"}%" autocomplete="off" %IF{"defined charsize" then="size=\"%charsize%\""}%></input>
<div id="%IF{"defined name" then="%name%"}%autocompleteResults"></div>
</div>%ENDSECTION{"input"}%</form>%ENDSECTION{"form"}%

stylesheet

Includes CSS stylesheet only.

Usage:

%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="stylesheet"}%

%STARTSECTION{"stylesheet"}%<style type="text/css" media="all">
#%IF{"defined name" then="%name%"}%autocompleteForm {
   position:relative;
}
#%IF{"defined name" then="%name%"}%autocompleteInput {
   width:%IF{"defined size" then="%size%" else="20em"}%;
}
#%IF{"defined name" then="%name%"}%autocompleteResults {
   position:relative;
   width:%IF{"defined size" then="%size%" else="20em"}%;
}
#%IF{"defined name" then="%name%"}%autocompleteResults .yui-ac-content {
   position:absolute;
   width:100%;
   font-size:94%; /* mimic twikiInputField */
   padding:0 .2em; /* mimic twikiInputField */
   border-width:1px;
   border-style:solid;
   border-color:#ddd #888 #888 #ddd;
   background:#fff;
   overflow:hidden;
   z-index:9050;
}
#%IF{"defined name" then="%name%"}%autocompleteResults .yui-ac-shadow {
   display:none;
   position:absolute;
   margin:2px;
   width:100%;
   background:#ccc;
   z-index:9049;
}
#%IF{"defined name" then="%name%"}%autocompleteResults ul {
   margin:0;
   padding:0;
   list-style:none;
}
#%IF{"defined name" then="%name%"}%autocompleteResults li {
   cursor:default;
   white-space:nowrap;
   margin:0 -.2em;
   padding:.1em .2em; /* mimic twikiInputField */
}
#%IF{"defined name" then="%name%"}%autocompleteResults li.yui-ac-highlight,
#%IF{"defined name" then="%name%"}%autocompleteResults li.yui-ac-prehighlight {
   background:#06c; /* link blue */
   color:#fff;
}
</style>%ENDSECTION{"stylesheet"}%

javascript

Includes javascript only.

Usage:

%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="javascript"}%

%STARTSECTION{"javascript"}%%INCLUDE{"%TOPIC%" section="yahoo" datatopic="%datatopic%" datasection="%datasection%"}%
<script type="text/javascript">
// <![CDATA[
twiki.Event.addLoadEvent(initAutoComplete, true);
function initAutoComplete() {
   var topics = [%INCLUDE{"%datatopic%" section="%datasection%"}%];
   var oACDS = new YAHOO.widget.DS_JSArray(topics);
   var topicAC = new YAHOO.widget.AutoComplete('%IF{"defined name" then="%name%"}%autocompleteInput', '%IF{"defined name" then="%name%"}%autocompleteResults', oACDS);
   topicAC.queryDelay = 0;
   topicAC.autoHighlight = true;
   topicAC.useIFrame = false;
   topicAC.prehighlightClassName = "yui-ac-prehighlight";
   topicAC.typeAhead = false;
   topicAC.allowBrowserAutocomplete = false;
   topicAC.useShadow = false;
   topicAC.formatResult = function(item, query) {
      return %IF{"defined itemformat" then="%itemformat%" else="item"}%;
   };
}
// ]]>
</script>%ENDSECTION{"javascript"}%

yahoo

Includes Yahoo User Interface Library javascript only. This is already included by section javascript.

Usage (only if you are using a customized javascript section):

%INCLUDE{"%TWIKIWEB%.AutoCompleteAddOn" section="javascript"}%

%STARTSECTION{"yahoo"}%<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/YahooUserInterfaceContrib/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/YahooUserInterfaceContrib/build/autocomplete/autocomplete.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/YahooUserInterfaceContrib/build/event/event.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/YahooUserInterfaceContrib/build/dom/dom.js"></script>%ENDSECTION{"yahoo"}%

Settings

  • Set SHORTDESCRIPTION = Autocomplete input field based on Yahoo's User Interface Library

Installation Instructions

  • Download the ZIP file from the Plugin web (see below).
  • Unzip AutoCompleteAddOn.zip in your ($TWIKI_ROOT) directory.
  • Optional plugins:
  • Alternatively,
    • Manually resolve the dependencies listed below.
      NameVersionDescription
      TWiki::Contrib::YahooUserInterfaceContrib1.0Required

AddOn Info

Authors: TWiki:Main.ArthurClemens
Copyright ©: 2007 Arthur Clemens
License: GPL
Dependencies:
NameVersionDescription
TWiki::Contrib::YahooUserInterfaceContrib1.0Required
Add-on Version: 23 Jun 2007 (version 1.0.1)
Change History:  
23 Jun 2007 1.0.1 Fixed CSS to work with Internet Explorer.
16 Jun 2007 1.0 First release.
Demo url:  
Home: http://TWiki.org/cgi-bin/view/Plugins/AutoCompleteAddOn
Feedback: http://TWiki.org/cgi-bin/view/Plugins/AutoCompleteAddOnDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/AutoCompleteAddOnAppraisal

Topic attachments
I Attachment History Action Size Date Who Comment
Unknown file formatmd5 AutoCompleteAddOn.md5 r2 r1 manage 0.2 K 2007-06-23 - 15:46 ArthurClemens  
Compressed Zip archivetgz AutoCompleteAddOn.tgz r2 r1 manage 32.8 K 2007-06-23 - 15:46 ArthurClemens  
Compressed Zip archivezip AutoCompleteAddOn.zip r2 r1 manage 42.8 K 2007-06-23 - 15:45 ArthurClemens  
Unknown file formatEXT AutoCompleteAddOn_installer r1 manage 29.7 K 2007-06-23 - 15:46 ArthurClemens  
PNGpng autocomplete_example.png r1 manage 19.4 K 2007-06-23 - 15:47 ArthurClemens Autocomplete example screenshot
Edit | Attach | Watch | Print version | History: r7 < r6 < r5 < r4 < r3 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r7 - 2011-09-03 - PeterThoeny
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.