Atlas AutoComplete Feature (UPDATED)

Wednesday, September 14, 2005 3:13:00 PM

Yesterday evening I build some example code for the AutoComplete feature in Atlas. What you need as first it the AtlasCore.js JavaScript which will give core functions to the page:

<html>
    <head runat="server">
        <atlas:Script ID="Script4" runat="server" Path="~/AtlasCore.js" />
    </head>
    <body>

        <form id="form1" runat="server">

            <input id="textBox1" type="text" />
            <div id="completionList" />

        </form>

    </body>
</html>


The AutoComplete feature will call a WebMethod (from a ASMX Web Service) with the text to search for and the maximum items to return. Note: it is very important to use the correct names for the arguments!

[WebService]
public class AutoCompleteService
{
    [WebMethod]
    public string[] GetWordList(string prefixText, int count) // very important are the names of the arguments!!
    {
        List<string> ret = new List<string>();

        // Add the search algorithm here


        return ret.ToArray();
    }
}


On the HTML code we now have to add the declaritive code to set the textBox1 to a AutoComplete box. In the Atlas Framework we have one section in the HTML code that will do this job:


<script type="text/xml-script">
  <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
    <references>
       <add src="AtlasUI.js" />
       <add src="AtlasControls.js" />
    </references>
    <components>
      <textBox id="SearchKey">
        <behaviors>
          <autoComplete
            completionList="completionList"     // the target element ID where to render the returned elements
            serviceURL="lab2.asmx"              // the url of the Web Service that hold the serviceMethod (see below)
            serviceMethod="GetWordList2"        // the name of the Web Method that will return a string[]
            minimumPrefixLength="2"             // the numbers of characters have to be entered
            completionSetCount="15"             // the maximum items to display
            completionInterval="500" />         // the msec to wait until we will get the next result
        </behaviors>
      </textBox>
    </components>
  </page>
</script>


In the page element we have the references and components. The references section will add script tags to the page when page is rendered. In the components sections you will see a textBox element which is our
SeachKey control. This control will get the behavoir of the AutoComplete feature, which is configured with the Web Service lab2.asmx and the Web Method GetWordList2. The completionList will be a DIV element
where the AutoComplete items will be rendered to:


<DIV id=completionList style="BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonshadow 1px solid; LEFT: 77px; VISIBILITY: visible; OVERFLOW: hidden; BORDER-LEFT: buttonshadow 1px solid; WIDTH: 153px; CURSOR: default; COLOR: windowtext; BORDER-BOTTOM: buttonshadow 1px solid; POSITION: absolute; TOP: 37px; BACKGROUND-COLOR: window; unselectable: unselectable">
    <DIV style="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: highlighttext; PADDING-TOP: 1px; TEXT-OVERFLOW: ellipsis; BACKGROUND-COLOR: highlight; TEXT-ALIGN: left" __item>michael</DIV>
    <DIV style="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: windowtext; PADDING-TOP: 1px; TEXT-OVERFLOW: ellipsis; BACKGROUND-COLOR: window; TEXT-ALIGN: left" __item>michaela</DIV>
    <DIV style="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: windowtext; PADDING-TOP: 1px; TEXT-OVERFLOW: ellipsis; BACKGROUND-COLOR: window; TEXT-ALIGN: left" __item>Microsoft</DIV>
</DIV>


I could not get the AutoComplete function get working on Netscape 7.1.

 

UPDATE:

If you want to use a server-side control you only have to drag&drop the control on the page (and the ScriptManager control) which will generated following code:

<form id="form1" runat="server">
    <atlas:ScriptManager id="AtlasPage1" runat="server" />
        <div>
            <atlas:TextBox id="searchBox" runat="server"
                AutoCompletionServiceUrl="lab2.asmx"
                AutoCompletionServiceMethod="GetWordList2"
                AutoCompletionInterval="100"
                AutoCompletionMinimumPrefixLength="1" />
        </div>
</form>

6 Comments

Comments have been disabled for this content.