create new tag
, view all tags

Idea: Jump Box With Auto Completion

We can raise the bar on usability of the jump box (GoBox) if we auto-complete text entered into the box. Currently, the user is expected to know the name of a topic and type in the whole topic name in order to jump to it. Well, actually it is possible to type in only part of the name and get a list of similar names. But the user interaction can be made more smooth and quick with some AJAX and auto-completion.

Proposed user interaction:

  • User types two characters into the jump box, such as su
  • Ajax call is done to get the list of webs and topics starting with the characters typed into the box
  • A suggestion container is shown below the jump box with the list of webs (if any) and topics
  • The list is reduced/expanded with each keystroke
  • User hits down arrow keys and the right key to copy the selection into the jump box
  • User hits enter to jump to the web or topic

Simulated examples:

After typing two characters:
      After typing three characters:


  • Ajax call is done after first two characters are entered
    • Two characters is chosen for performance reasons (relatively small list to download even for large webs)
  • If three or more characters are typed, the list is reduced (without an Ajax call to the server)
  • Ajax call is done again if first two characters are changed
  • Auto-complete is done case insensitive
  • The suggestion box could be shown as soon as the jump box has focus, containing simple help text on how to use the jump box

-- Contributors: PeterThoeny - 06 Oct 2006


This would be a practical example and a good initial use of the TWikiAjaxFramework.

A relatively lean tool to create this type of user interaction is the Yahoo User Interface Library, http://developer.yahoo.com/yui/

Does anyone feel an itch / challenge to implement this?

-- PeterThoeny - 06 Oct 2006

TWikiAjaxFramework provides an interface to the Yahoo AJAX library. Yahoo also offers an auto-complete library.

-- ArthurClemens - 06 Oct 2006

Where would the information come from? What would the search look like?

-- ArthurClemens - 06 Oct 2006

It could be a simple XMLHttpRequest calling a TWiki.AjaxContribTopicList topic with parameter s=su;w=Codev;skin=plain (supplying search term and web, and activating the plain skin). That topics has a simple SEARCH, such as: %SEARCH{ "%URLPARAM{s}%" scope="topic" topic="%URLPARAM{s}%*" web="%URLPARAM{w}%" nonoise="on" format="$topic" separator="," }% that returns topics with names starting with the supplied search term. Example search result for search on su in Codev web:


This can be transformed into a JavaScript array, filtered and supplied into the suggestion box.

-- PeterThoeny - 06 Oct 2006

I´ve implemented autocompletion using YUI the easy way. YUI provides several class which can act as data source for the autocompletion widget. I´ve used the XHR data source. This one makes it possible to put the actual search in a topic (AjaxContribTopicList in my case, see below). The javascript code loads the results of the topic and uses them as data source for the autocompletion. Here´s my implementation using two topics: JumpSearchBase which is included in my Leftbar and the AjaxContribTopicList mentioned above. To get the code working you have to include the yui javascript files in your header and style the dropdown with css. You can find examples on the yui site.

Content of JumpSearchBase:

<div  id="ymodblock">
<div id="ymod">
<form name="jumpForm" action="/twikipd/bin/view/%INCLUDINGWEB%/%INCLUDINGTOPIC%"><input id="yjumpinput" type="text" class="twikiInputField patternFormFieldDefaultColor" name="topic" size="12" value="Jump" onfocus="clearDefaultandCSS(this);" onblur="setDefaultText(this);" /></form></div>
<div id="ymod" class="searchfield"><form name="quickSearchForm" action="/twikipd/bin/view/%INCLUDINGWEB%/WebSearch"><input type="text" class="twikiInputField patternFormFieldDefaultColor" name="search" value="Search" size="12" onfocus="clearDefaultandCSS(this);" onblur="setDefaultText(this);" />
<div class="clearer"></div>
<div id="ysearchcontainer"></div>

Contents of AjaxContribTopicList:

<noautolink>%SEARCH{ "" scope="topic" web="" nonoise="on" format="$topic" separator="," }%</noautolink>

This solution works really good and is extendable as well. You can easily put a similar box beneath the search box which shows the search results... I´m not a regular visitor at twiki.org so when in doubt drop me a line via email.

-- CarloJoerges - 20 Mar 2007

Edit | Attach | Watch | Print version | History: r4 < r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r4 - 2007-03-20 - CarloJoerges
  • 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-2018 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.