Using AJAX and Script.aculo.us to dynamically populate the topic Jump box.

Scriptaculous.js is a useful adjunct to prototype.js which offers several extensions which can be used in our wiki. Recently, we used their Autocompleter coupled with a small back-end script to dynamically populate the Topic Jump box.

When the User types into the Jump box, they are prompted with a ordered list of all topics starting with those characters.

This was accomplished by adding some <script> inclusions, some css, a div and a javascript initialization call, to the topic which defines the Jump box. (to be filled in)

A small back-end script processes the request and returns an XML response.

Once I get to work I will post the code, and more complete documentation.

-- Contributors: CraigMeyer - 25 Jan 2007

Discussion

We had very bad experience with the prototype scripts.

Certain versions of IE (including the one we used where I work) crash the minute you load it.

-- KennethLavrsen - 25 Jan 2007

TWikiAjaxContrib offers AJAX functionality based on Yahoo's User Interface library (also made available for TWiki with YahooUserInterfaceContrib). I would like to see autocomplete functionality using these contribs.

-- ArthurClemens - 25 Jan 2007

Craig, I have often wondered if it was possible to implement that functionality for the Topic Jump box. After jumping to enough topics you get a similar result with the browser remembering the ones you've jumped to and narrowing it down for you as you type, but an AJAX solution sounds great.

-- JoshuaJohnston - 25 Jan 2007

An ajax-based topic selector would be also of use to reparent topics. Oopsmore is so slow as it fetches the complete topiclist, as you might occasionally reparent the topic. This i.e. downs your server on large webs.

Apropos large webs. How does the current ajax solution perform on large webs (10k topics or more)?

-- MichaelDaum - 25 Jan 2007

Note that autocomplete asks from the user that he knows the possible items. Good for Jump, not so good for assigning a parent.

-- ArthurClemens - 25 Jan 2007

Ken - I certainly agree that getting cross-browser stuff to work is a pain! That's why we are using the latest prototype.js V1.5. Also, we have the advantage of having a corporate mandated version of the browser; V6.0 Internet Explorer, though developers use Firefox .

I really wanted to use the Autocompleter implemented at Beauscott.com as it uses the select dropdown, rather than a div to display the alternatives, which is standard and allows for simple scrolling. I had troubles getting it to work on IE, though the demo works fine! Programmer error, I guess

Arthur - I wasn't aware of Yahoo versions of autocomplete, they can certainly be evaluated Yahoo's autocomplete, the documentation looks a bit daunting.

Michael - We don't have webs that big, max is about 1500 topics. We use a heirarchical web structure. The server script could be extended to cache the directory listing in a sorted file, updated as new topics are noticed. Also one can limit how many results are returned.

I put all the needed css, and javascript into the WebLeftBarSearch page (which I attached to this topic).

Here are just the changes, for illustration.

<div class="patternFormHolder">

<script src="/js/scriptaculous.js" type="text/javascript"></script>

<style type='text/css'>
 div.autocomplete {
      position:absolute;
      width:250px;
      background-color:white;
      border:1px solid #888;
      margin:0px;
      padding:0px;
    }
    div.autocomplete ul {
      list-style-type:none;
      margin:0px;
      padding:0px;
    }
    div.autocomplete ul li.selected { background-color: #ffb;}
    div.autocomplete ul li {
      list-style-type:none;
      display:block;
      margin:0;
      padding:2px;
      height:16px;
      cursor:pointer;
    }
</style>
.
.
.
<input type="text" class="patternFormField patternFormFieldDefaultColor" name="topic" id="auto_topic" size="24" value="Jump" onfocus="clearDefaultandCSS(this);" /><div id="suggestionBox" class="autocomplete"></div>
</th>
.
.
.
</tr></table>
<script type="text/javascript" language="javascript">
  var myAutoCompleter = new Ajax.Autocompleter('auto_topic', 'suggestionBox', '%SCRIPTURLPATH{SuggestTopic}%/%BASEWEB%', {frequency: 0.25});
</script>
</form>

The changes are:

• Include the needed javascript (we already have prototype.js included in the head)
• Setup the (default) css
• put the <div id="suggestionBox" right after the input field
• call the initialization javascript.

-- CraigMeyer - 25 Jan 2007

Michael - I extended the server script to cache the Topic names in sorted order, which could improve performance on huge webs. I haven't done any timing yet, I need to find a huge directory for the test. I am curious which will be faster? After all reading a directory (in the PERL kernel) and doing a regexp in PERL, then a sort on the hits could be faster than reading a file (in PERL) plus the regexp? When you say 10K topics, there are actually at least 20K files (.txt and .txt,v) so caching could be a big improvement. I will test tomorrow, and post the results and the code.

-- CraigMeyer - 26 Jan 2007

Michael - Wow, you were correct! Caching makes it 20 times faster on large directories! I am attaching the caching version (uses cache file %WEB%/.TopicList)

-- CraigMeyer - 26 Jan 2007

We actually also use IE 6.0 and this is what crashes with the prototype.js. And when I say crash I mean crash. It crashes IE on the load so you cannot view topics in TWiki at all. And it is not all the machines that does it. Approx 1 of 2. Never found out whet caused it. First we downgraded the prototype to an older version which fixed it. And later Arthur replaced it with something better.

I was only meaning to warn against this odd problem in case you did not know.

-- KennethLavrsen - 26 Jan 2007