Version françaiseAJAX - Autocompletion
This article is an abstract of three articles in french section. If you read NSFTools blog, you've had a first solution to implement autocompletion with scriptaculous.
First Step : Installation of javascript libraries
Like Julian, I use javascript library Scriptaculous. Scriptaculous is based on another Javascript library, prototype.js. You can download all this libraries on scriptaculous web site. Unzip the file in your hard disk and add all the files in shared resources of your Lotus Notes Database. You can create a new database to add this javascript files too. This new database can be used by all your application who need this javascript libraries and it will be easier to update the javascript files. The advantage of files resources is to be accessible from Windows explorer with WebDAV. I'll write an article about this new Domino service.
Second Step : Creation of the form
We just need one editable field.
- create new form
- add editable text field
- in the last tab of the property of the field add an id name. For example : autocomplete
- add javascript code as HTML relay just after your field :
<div id="autocomplete_choices" class="autocomplete"></div>
<script language="javascript" charset="UTF-8" >
new Ajax.Autocompleter("autocomplete", "autocomplete_choices",
"search?openpage", {method:'get',paramName: 'autocomplete'});
</script> - add in your HTML Head content the declaration of the javascript libraries prototype.js and scriptaculous and the stylesheet to display list :
"<script src=\"prototype.js\" type=\"text/javascript\"></script>
<script src=\"effects.js\" type=\"text/javascript\"></script>
<script src=\"dragdrop.js\" type=\"text/javascript\"></script>
<script src=\"controls.js\" type=\"text/javascript\"></script>
<style>
div.autocomplete {
font-size:10px;
font-family : tahoma, arial, helvetica, sans-serif;
width: 350px;
background: #fff;
}
div.autocomplete ul {
border:1px solid #888;
margin:0;
padding:0;
width:100%;
list-style-type:none;
}
div.autocomplete ul li.selected {background-color: #ffb;}
div.autocomplete ul li {
margin:0;
padding:3px;
cursor:pointer;
}
</style>"
The form is ready to use.
Third Step : Search view
In my example, the search view have only one sorted column. This column only display the values to show in autocompletion list.
Last Step : Search page
To search all the words who begin by the letters and send the response to Ajax, I use a Notes Page. It's possible to use form or agent too. The result must look like :
<ul>
<li>1st word</li>
...
</ul>
- Create new page named "search"
- Select "Type of content : HTML" in the second tab of the page properties
- Add new computed field with formula :
val := @DbLookup("":"nocache"; "";"dbautocomplete"; @UrlQueryString("autocomplete"); 1; [PartialMatch] );
@If(@IsError(val); ""; "<ul>" + @Implode("<li>" + val + "</li>") + "</ul>");
BONUS
You can add two interresting options to the declaration of the autocomplete class
1. Start search after the nth characters
If you don't want to start autocomplete search from the first letter, you can add a parameter to specify after how many letter you want to begin.
Add the parameter "minChars" like this :
new Ajax.Autocompleter("autocomplete", "autocomplete_choices",
"search?openpage", {method:'get',paramName: 'autocomplete', minChars: 2});2. Manage multivalues field
You can specify a separator values too. When the user will type this separator the autocompleter will start a new search with only the charaters typed after.
Add the parameter "tokens" like this :
new Ajax.Autocompleter("autocomplete", "autocomplete_choices",
"search?openpage", {method:'get',paramName: 'autocomplete', tokens: ','});
