Added Autocomplete page to quickstart

4 files changed, 111 insertions, 2 deletions

diff --git a/demos/quickstart/protected/pages/ActiveControls/AutoComplete.page b/demos/quickstart/protected/pages/ActiveControls/AutoComplete.page
new file mode 100644
index 00000000..14af4af7
--- /dev/null
+++ b/demos/quickstart/protected/pages/ActiveControls/AutoComplete.page
@@ -0,0 +1,18 @@
+<com:TContent ID="body">

+<!-- $Id$ -->

+<h1>TAutoComplete</h1>

+<com:DocLink ClassPath="System.Web.UI.ActiveControls.TAutoComplete" />

+

+<p class="block-content">

+<tt>TAutoComplete</tt> is an extended <tt>ActiveTextBox</tt> that provides a list of suggestions on the current partial word typed in the textbox. The suggestions are requested using callbacks. The <tt>Frequency</tt> and <tt>MinChars</tt> properties sets the delay and minimum number of characters typed, respectively, before requesting for sugggestions. An embedded <tt>TRepeater</tt> is used to Display the list of suggestions. It can be accessed and styled through the <tt>Suggestions</tt> property and its sub-properties.<p>

+

+<p class="block-content">

+On each request for suggestions, the <tt>OnSuggestion</tt> event will be raised. The event handler receives the entered token that can be used to build the list of suggestions and to dataBind() it to the <tt>Suggestions</tt> repeater.</p>

+

+<p class="block-content">

+When a suggestion is selected the <tt>OnSuggestionSelected</tt> event is raised, with the index of the selected suggestion contained in the parameter. Multiple selections can be performed in the same textbox. The selections must be separated by any characters specified with the <tt>Separator</tt> property.

+</p>

+

+<com:RunBar PagePath="ActiveControls.Samples.TAutoComplete.Home" />

+

+<div class="last-modified">$Id$</div></com:TContent>

diff --git a/demos/quickstart/protected/pages/ActiveControls/Home.page b/demos/quickstart/protected/pages/ActiveControls/Home.page
index 1dad48a4..5cf4ab17 100644
--- a/demos/quickstart/protected/pages/ActiveControls/Home.page
+++ b/demos/quickstart/protected/pages/ActiveControls/Home.page
@@ -132,7 +132,7 @@ TActiveButton</a> control. See also the later part of the <a href="?page=Tutoria
 

 <ul id="u3" class="block-content">

 	<li>

-	* <a href="?page=ActiveControls.AutoComplete">TAutoComplete</a>

+	<a href="?page=ActiveControls.AutoComplete">TAutoComplete</a>

 	extends TActiveTextBox to offer text completion suggestions.

 	</li>

 

@@ -357,4 +357,4 @@ realize the active controls.</p>
 

 </ul>

 

-<div class="last-modified">$Id$</div></com:TContent>
\ No newline at end of file
+<div class="last-modified">$Id$</div></com:TContent>
diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/TAutoComplete/Home.page b/demos/quickstart/protected/pages/ActiveControls/Samples/TAutoComplete/Home.page
new file mode 100644
index 00000000..6f566364
--- /dev/null
+++ b/demos/quickstart/protected/pages/ActiveControls/Samples/TAutoComplete/Home.page
@@ -0,0 +1,57 @@
+<com:TContent ID="body">

+<!-- $Id$ -->

+

+<style type="text/css">

+<!--

+.acomplete { position: relative; z-index: 5; background-color: #EDF5FF; border: 1px solid #243356; }

+.acomplete ul, .acomplete li { margin: 0px; padding: 0px; list-style: none; color: #333; }

+.acomplete li { padding: 4px; border-top: 1px solid #ccc; }

+.acomplete .selected { background-color: #ffc; }

+-->

+</style>

+

+<h1>TAutoComplete Sample (AJAX)</h1>

+

+<table class="sampletable">

+

+<tr><td class="samplenote">

+Simple Autocompleter:

+</td><td class="sampleaction">

+<com:TAutoComplete

+    ID="AutoComplete"

+    OnSuggest="suggestNames"

+    OnSuggestionSelected="suggestionSelected1"

+    ResultPanel.CssClass="acomplete"

+    Suggestions.DataKeyField="id" >

+

+    <prop:Suggestions.ItemTemplate>

+    <li><%# $this->Data['name'] %></li>

+    </prop:Suggestions.ItemTemplate>

+</com:TAutoComplete>

+<com:TActiveLabel ID="Selection1" />

+</td></tr>

+

+<tr><td class="samplenote">

+Autocompleter with multiple selection:

+</td><td class="sampleaction">

+<com:TAutoComplete

+    ID="AutoComplete2"

+    OnSuggest="suggestNames"

+    OnSuggestionSelected="suggestionSelected2"

+    Separator=","

+    ResultPanel.CssClass="acomplete"

+    Suggestions.DataKeyField="id" >

+

+    <prop:Suggestions.ItemTemplate>

+    <li><%# $this->Data['name'] %></li>

+    </prop:Suggestions.ItemTemplate>

+</com:TAutoComplete>

+(Use ',' to separate the selected suggestions)

+<com:TActiveLabel ID="Selection2" />

+</td></tr>

+

+</table>

+

+<com:TJavascriptLogger />

+

+<div class="last-modified">$Id$</div></com:TContent>

diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/TAutoComplete/Home.php b/demos/quickstart/protected/pages/ActiveControls/Samples/TAutoComplete/Home.php
new file mode 100644
index 00000000..ca8a9e59
--- /dev/null
+++ b/demos/quickstart/protected/pages/ActiveControls/Samples/TAutoComplete/Home.php
@@ -0,0 +1,34 @@
+<?php

+// $Id$

+class Home extends TPage

+{

+    public function suggestNames($sender,$param) {

+        // Get the token

+        $token=$param->getToken();

+        // Sender is the Suggestions repeater

+        $sender->DataSource=$this->getDummyData($token);

+        $sender->dataBind();                                                                                                     

+    }

+

+    public function suggestionSelected1($sender,$param) {

+        $id=$sender->Suggestions->DataKeys[ $param->selectedIndex ];

+        $this->Selection1->Text='Selected ID: '.$id;

+    }

+

+    public function suggestionSelected2($sender,$param) {

+        $id=$sender->Suggestions->DataKeys[ $param->selectedIndex ];

+        $this->Selection2->Text='Selected ID: '.$id;

+    }

+

+    public function getDummyData($token) {

+        // You would look for matches to the given token here

+        return array(

+            array('id'=>1, 'name'=>'John'),

+            array('id'=>2, 'name'=>'Paul'),

+            array('id'=>3, 'name'=>'George'),

+            array('id'=>4, 'name'=>'Ringo')

+        );

+    }

+}

+

+?>