[jira] Updated: (WW-1100) Adding autocomplete funcitonality to webwork

["Don Brown (JIRA)" <ji...@apache.org>]

     [ http://issues.apache.org/struts/browse/WW-1100?page=all ]

Don Brown updated WW-1100:
--------------------------

    Fix Version: Future
                     (was: 2.0.0)

> Adding autocomplete funcitonality to webwork
> --------------------------------------------
>
>          Key: WW-1100
>          URL: http://issues.apache.org/struts/browse/WW-1100
>      Project: Struts Action 2
>         Type: Improvement

>   Components: Views
>     Versions: WW 2.2.1
>     Reporter: Jeff Cunningham
>     Assignee: Rainer Hermanns
>     Priority: Minor
>      Fix For: Future

>
> Hi...i have a basic autocomplete functionality working using the ww:component tag,  code i found from the dwr mailing list, and a style from script.actulo.us. The code is based on dwr and script.aculo.us (not dojo)
> To use it, you basically need to include the new autocomplete.js file (in addition to the dwr and script.aculo.us and prototype includes) and include the ww:component tag. thats it. (plus the style)
> Below is the code for the autocomplete.js file:
> 			my=function(){};
> 			my.Autocompleter = Class.create();
> 			Object.extend(Object.extend(my.Autocompleter.prototype,
> 			Autocompleter.Base.prototype), {
> 			    initialize: function(element, update, DWRFunction, onComplete,
> 				options) {
> 			        this.baseInitialize(element, update, options);
> 			        this.DWRFunction           = DWRFunction;
> 			        this.onComplete            = onComplete;
> 			        this.options               = options || {}; // none yet
> 			    },
> 			    getUpdatedChoices: function() {
> 					this.DWRFunction(this.element.value,this.onCompleteFunction());
> 			    },
> 			    onCompleteFunction: function() {
> 			        var t=this;
> 			        return function(data) {
> 			            // Do some DWR range selection.
> 			            // This will not work with tokenised autocompletion,
> 			            // so is not really recommended. But I like it
> 			            var start=t.element.value.length;
> 			            t.element.value=data[0];
> 			            DWRUtil.selectRange(t.element,start,t.element.value.length);
> 			            t.updateChoices(t.onComplete(data));
> 			        }
> 			    }
> 			});		
> here is an example style:
> 	   	  div.autocomplete_class {
>             width: 350px;
>             background: #fff;
>           }
>           div.autocomplete_class ul {
>             border:1px solid #888;
>             margin:0;
>             padding:0;
>             width:100%;
>             list-style-type:none;
>           }
>           div.autocomplete_class ul li {
>             margin:0;
>             padding:3px;
>           }
>           div.autocomplete_class ul li.selected { 
>             background-color: #ffb; 
>           }
>           div.autocomplete_class ul strong.highlight { 
>             color: #800; 
>             margin:0;
>             padding:0;
>           }
> here is how the component is called:
> 			<ww:component label="%{getText('form.label.cityName')}" id="autocomplete" name="data" theme="css_xhtml" template="autocomplete">
> 				<ww:param name="dwrMethod">FormHelper.getCities</ww:param>
> 				<ww:param name="minChars">4</ww:param>
> 			</ww:component>
> and below is the autocomplete.ftl from the css_xhtml directory:
> <#include "/${parameters.templateDir}/css_xhtml/controlheader.ftl" />
> <#include "/${parameters.templateDir}/simple/text.ftl" />
> 			<div class="${parameters.id}_class" id="${parameters.id}_div"></div>
> 			<script type="text/javascript">
> 				var onComplete= function(data) {
> 			    // The onComplete function takes one argument, which is the
> 			    // data returned by the DWR call.
> 			    // It must return a string, which should be the
> 			    // html definition of a <ul> tag with <li> tags for each item.
> 			    var html="<ul>";
> 			    for (var i=0;i<data.length;i++) {
> 			        html+="<li>"+data[i]+"</li>";
> 			    }
> 			    html+="</ul>";
> 			    return html;
> 				}
> 				new my.Autocompleter("${parameters.id}","${parameters.id}_div",${parameters.dwrMethod},
> 				onComplete, {minChars: ${parameters.minChars}});
> 			</script>
> <#include "/${parameters.templateDir}/css_xhtml/controlfooter.ftl" />
> Note that the dwrMethod is the name of a class defined in your dwr.xml file, along with the method name to call to look up the results to return.
> minChars is the number of characters that are typed in the textfield before sending the data to the server.
> I also had the div id and class default to a naming convention, to follow the webwork convention ideas...the div id and class are just the component id with _class or _id appended. this could obviously be changed.

-- 
This message is automatically generated by JIRA.
-
If you think it was sent incorrectly contact one of the administrators:
   http://issues.apache.org/struts/secure/Administrators.jspa
-
For more information on JIRA, see:
   http://www.atlassian.com/software/jira