This tutorial is based on the following software environment.

Windows XP Professional, Lotus Notes Client 6, Domino Server 6, Internet Explorer 7

AJAX stands for Asynchronous JavaScript and XML which provides API for dynamic and interactive web applications. AJAX do not require page reload and the data transfer between client and server is small in size. Since it works in asynchronous fashion, browser may execute other tasks during AJAX call.

The JavaScript library and css files used in this tutorial are provided by phpguru.org

http://www.phpguru.org/static/AutoComplete.html

Create a new database in server Go to File–>Database–>New. Give the file name as test.nsf

You may go to phpguru link and download the files. Alternatively you may download the JavaScript and CSS files here. The files are attached below.

autocomplete.css      autocomplete.js

Add the JavaScript file autocomplete.js and CSS file autocomplete.css as new File Resources under shared resources.

Create new form. In form properties set the Name as Employee. Create a table with one row and two columns. In table properties set the width of cells as 2.0 in both cells. Now enter text in left cell. Type Name in left cell. Create a text field in right cell. Name it as EmployeeName. Select type as Text in field properties. 

Create a new Action. Name it as Save&Close. Write the formula as

@Command([FileSave]);
@Command([FileCloseWindow]);

Save the form.

We have to create a new view. Go to designer and you may see an untitled view already exists there. Open the view and name it as All in view properties. Create one column with title as Name. Select the column value as EmployeeName. Create a view action. Name it as Create Employee. Write the formula as

@Command([Compose]; "Employee");

Now open the db in Notes client and create and save some documents.

Ok now let us create another form for searching employees.

Create new form. In form properties set the Name as Search Employee. Create a table with one row and two columns. In table properties set the width of cells as 2.0 in both cells. Now enter text in left cell. Type Search Employee in left cell. Create a text field in right cell. Name it as EmployeeSearch. Select type as Text in field properties and under HTML tab write the id property as EmployeeSearch.

Now we have to refer JavaScript and CSS files in Search Employee form. Just type the following code snippet under HTML Head Content of Search Employee form in programmers pane Objects tab.

"<script language=\"JavaScript\" src=\"/"+
@ReplaceSubstring(@Subset(@DbName; -1); "\\"; "/")+
"/AutoComplete.js\" >"+"</script>"+
@NewLine+
"<link href=\"/"+@ReplaceSubstring(@Subset(@DbName; -1); "\\"; "/")+
"/AutoComplete.css\" rel=\"stylesheet\" type=\"text/css\">"

We have to call one JavaScript function in the onLoad event of Search Employee form. Write the code under onLoad in programmers pane Objects tab.

loadEmployees();

Write the following JavaScript code under JS Header of Search Employee form.

function loadEmployees(){
     var xmlhttp;
     var response;
     var url;
     var data=new Array();
     if (window.XMLHttpRequest){
          xmlhttp=new XMLHttpRequest();
     }else if (window.ActiveXObject){
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     url=location.href;
     url=url.substring(0, url.toUpperCase().indexOf(".NSF")+4);
     url=url+"/(GetEmployees)?OpenAgent";
     xmlhttp.open("GET",url,false);
     xmlhttp.onreadystatechange=function(){
          if(xmlhttp.readyState==4 && xmlhttp.status==200){
               response=xmlhttp.responseText;
               data=response.split("@@@");
               AutoComplete_Create('EmployeeSearch', data);
          }
     }
     xmlhttp.send(null);
}   

 Save the form. 

Now we have to create an agent. Ensure that your userid got sufficient rights to execute agents in server. Go to programmers pane and under Shared Code–>Agents, create new agent. In Agent properties give name as GetEmployees. Select Runtime dropdown as Agent list selection and Target as None. Select the agent type as LotusScript and write the following code. 

Dim session As New NotesSession
Dim db As NotesDatabase
Dim view As NotesView
Dim doc As NotesDocument
Dim result As String
Dim count As Integer
 
Set db=session.CurrentDatabase
Set view=db.GetView("All")
Set doc=view.GetFirstDocument
result=""
count=0
 
Do Until doc Is Nothing
     If count=0 Then
          result=doc.EmployeeName(0)
     Else
          result=result+"@@@"+doc.EmployeeName(0)
     End If
 
     Set doc=view.GetNextDocument(doc)
     count=count+1
Loop
Print "Content-Type: text/plain"
Print result

Save the agent.  

Open the Search Employee form in web. http://<server-name>/Test.nsf/Search%20Employee?OpenForm. If you have created your db under subfolder of data directory you may include the same in url. Start typing the first characters of employee names you have created and see the difference!

Now let us walk through the code.

The GetEmployees agent go through the view All and generates a string with employee names separated by @@@ delimiter. It sets the content type as plain text so that it returns plain string not included by html characters. So the return string of this agent will be something like

“jack@@@edward@@@smith”

XMLHttpRequest is an API which provides data exchange between client and server using http. It is used by browser to send GET and POST requests to web server. In loadEmployees() function, we initialize the object first. For different browsers we use different ways to initialize object.

if (window.XMLHttpRequest){
          xmlhttp=new XMLHttpRequest();
}else if (window.ActiveXObject){
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

Then we call the agent Getmployees which returns employee names separated by delimiter. 

url=url+"/(GetEmployees)?OpenAgent";
xmlhttp.open("GET",url,false);

If the http request is success, we get the response text, which is converted into array using split function. Then we call the function

AutoComplete_Create('EmployeeSearch', data);

  by passing the id attribute of field and array of employee names.

cheers!