[
https://issues.apache.org/jira/browse/WW-1100?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Lukasz Lenart closed WW-1100.
-----------------------------
Resolution: Not A Problem
> Adding autocomplete funcitonality to webwork
> --------------------------------------------
>
> Key: WW-1100
> URL: https://issues.apache.org/jira/browse/WW-1100
> Project: Struts 2
> Issue Type: Improvement
> Components: Plugin - Tags
> Affects Versions: WW 2.2.1
> Reporter: Jeff Cunningham
> Assignee: Lukasz Lenart
> Priority: Minor
>
> 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 was sent by Atlassian Jira
(v8.20.10#820010)
