Home

Castle Stronghold

•  
• Home
• Download
• API Doc
• Using
• Forum
• Jira/Issue tracker
• Builds

Auto completion

The AutoComplete enables a google style search where partial searches are emitted as you type.

It is higly advisable to carefully read the script.aculo.us documentation for the AutoCompleter to know about the possible completionOptions.

AjaxHelper offers the following methods for providing AutoCompletion:

• InputTextWithAutoCompletion(IDictionary parameters, IDictionary tagAttributes)
• InputTextWithAutoCompletion(String inputName, String url, IDictionary tagAttributes, IDictionary completionOptions)
• AutoCompleteInputText( String elementId, String url, IDictionary options )

FormHelper also offers a combination of a input field with databinding behaviour and Ajax Autocomplete behaviour.

• FormHelper.TextFieldAutoComplete(string target, string url, IDictionary tagAttributes, IDictionary completionOptions)

Usage Example

Ok, let me directly start with the code:

<% 
ajaxOpt = {@parameters: "{user:'${user.Id}'}", @paramName:'"search"'}
inputOpt = {@class: 'txt'}
%>
<p>Enter your favorite programming frameworks:</p>

<form action="${Url.For({@action:'EnterDataResults'})}" method="post">
    <input type="hidden" name="user" value="${user.Id}" />
    <table class="blind">
        <tr>
            <td>IoC-Framework</td>
            <td>${Form.TextFieldAutoComplete("preference.ioc", Url.For({@action: "LookupIoc"}), inputOpt, ajaxOpt)}</td>
        </tr>
        <tr>
            <td>OR/M-Framework</td>
            <td>${Form.TextFieldAutoComplete("preference.orm", Url.For({@action: "LookupOrm"}), inputOpt, ajaxOpt)}</td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Save Data" /></td>
        </tr>
    </table>    
</form>

#set ($ajaxOpt = "%{parameters='{user:\'$user.Id\'}', paramName='\'search\''}")
#set ($inputOpt = "%{class='txt'}")
<p>Enter your favorite programming frameworks:</p>

<form action="$UrlHelper.For("%{action='EnterDataResults'}")" method="post">
    <input type="hidden" name="user" value="$user.Id" />
    <table class="blind">
        <tr>
            <td>IoC-Framework</td>
            <td>$FormHelper.TextFieldAutoComplete("preference.ioc", UrlHelper.For("%{action='LookupIoc'}"), inputOpt, ajaxOpt)</td>
        </tr>
        <tr>
            <td>OR/M-Framework</td>
            <td>$FormHelper.TextFieldAutoComplete("preference.orm", Url.ForHelper("%{action='LookupOrm'}"), inputOpt, ajaxOpt)</td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Save Data" /></td>
        </tr>
    </table>    
</form>

Now to the explanation.

The variable ajaxOpt shows how to specify options for the Scriptaculous AutoCompleter. The AutoCompleter wants JSON, so you need to make sure that string literals are enclosed in quotation marks both in Brail/NVelocity and in the value itself.

In this example, the completion options are used to add a custom parameter to the query, which will be used by the controller called by the AutoCompleter. Additionally the name of the parameter is changed. If it is left unchanged, AutoCompleter would use the name attribute of the input element, in this case preference.ioc or preference.orm, which is normally unwanted due to databinding that should not occur at this point.

inputOpt simply defines options for the input tag and should be straightforward.

The last thing to do on the calling page is to call the helper method.

Next is the AJAX controller:

public void LookupIoc([ARFetch("user")]User user, string search)
{
    // perform search and put results into PropertyBag
}

<ul>
<% for ioc in frameworks: %>
    <li>${ioc.Name}</li>
<% end %>
</ul>

<ul>
#foreach ($ioc in $frameworks)
    <li>$ioc.Name</li>
#end
</ul>

This is straight-forward. Format the results as an unordered list. The AutoCompleter uses this list to build the contents of the completion widget.

Search WWW Search castleproject.org