You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ofbiz.apache.org by jl...@apache.org on 2010/09/27 17:44:38 UTC
svn commit: r1001789 - in /ofbiz/branches/jquery: framework/common/config/
framework/example/config/ framework/example/widget/example/
framework/images/webapp/images/ framework/widget/src/org/ofbiz/widget/form/
framework/widget/templates/ themes/tomaha...
Author: jleroux
Date: Mon Sep 27 15:44:37 2010
New Revision: 1001789
URL: http://svn.apache.org/viewvc?rev=1001789&view=rev
Log:
A contribution from Rupert Howell for "Auto-complete for dropdowns (it's currently in selectall.js)" (https://issues.apache.org/jira/browse/OFBIZ-3917) - OFBIZ-3917
We thought initially that there was a problem with this patch but actually, as I found later, it was another issue, not in this code, fixed since. So works well as demonstrated in widget Example.
TODO : return only the Id, else you need to edit the field to remove the description... (or the Id if you need the description)
Modified:
ofbiz/branches/jquery/framework/common/config/CommonUiLabels.xml
ofbiz/branches/jquery/framework/example/config/ExampleUiLabels.xml
ofbiz/branches/jquery/framework/example/widget/example/FormWidgetExampleForms.xml
ofbiz/branches/jquery/framework/images/webapp/images/selectall.js
ofbiz/branches/jquery/framework/widget/src/org/ofbiz/widget/form/MacroFormRenderer.java
ofbiz/branches/jquery/framework/widget/templates/htmlFormMacroLibrary.ftl
ofbiz/branches/jquery/themes/tomahawk/webapp/tomahawk/css/style.css
Modified: ofbiz/branches/jquery/framework/common/config/CommonUiLabels.xml
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/common/config/CommonUiLabels.xml?rev=1001789&r1=1001788&r2=1001789&view=diff
==============================================================================
--- ofbiz/branches/jquery/framework/common/config/CommonUiLabels.xml (original)
+++ ofbiz/branches/jquery/framework/common/config/CommonUiLabels.xml Mon Sep 27 15:44:37 2010
@@ -4607,6 +4607,10 @@
<value xml:lang="en">No States/Provinces exist: _NA_</value>
<value xml:lang="fr">Aucun état ou province: _NA_</value>
</property>
+ <property key="CommonNoStatesProvincesExists">
+ <value xml:lang="en">No States/Provinces exist</value>
+ <value xml:lang="fr">Aucun état ou province</value>
+ </property>
<property key="CommonNoTaskAssigned">
<value xml:lang="ar">Ùا Ù
ÙاÙ
ØاÙÙØ© تستÙجب Ø¥ÙتÙ
اÙ
ÙÙ
</value>
<value xml:lang="de">Zur Zeit sind keine Aufgabe vorhanden.</value>
Modified: ofbiz/branches/jquery/framework/example/config/ExampleUiLabels.xml
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/example/config/ExampleUiLabels.xml?rev=1001789&r1=1001788&r2=1001789&view=diff
==============================================================================
--- ofbiz/branches/jquery/framework/example/config/ExampleUiLabels.xml (original)
+++ ofbiz/branches/jquery/framework/example/config/ExampleUiLabels.xml Mon Sep 27 15:44:37 2010
@@ -46,8 +46,8 @@
<value xml:lang="fr">Liste déroulante à auto complétion</value>
</property>
<property key="ExampleAutocompleteTooltip">
- <value xml:lang="en">GROUP type based example, use Geo.Geoid and Geo.GeoName Entity.fields for completion</value>
- <value xml:lang="fr">Exemple sur le type GROUP et utilisant Geo.Geoid et Geo.GeoName comme Entité.champs pour la complétion</value>
+ <value xml:lang="en">COUNTRY type based example, use Geo.Geoid and Geo.GeoName Entity.fields for completion</value>
+ <value xml:lang="fr">Exemple sur le type COUNTRY et utilisant Geo.Geoid et Geo.GeoName comme Entité.champs pour la complétion</value>
</property>
<property key="ExampleBirtChartReport">
<value xml:lang="en">HTML chart report</value>
Modified: ofbiz/branches/jquery/framework/example/widget/example/FormWidgetExampleForms.xml
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/example/widget/example/FormWidgetExampleForms.xml?rev=1001789&r1=1001788&r2=1001789&view=diff
==============================================================================
--- ofbiz/branches/jquery/framework/example/widget/example/FormWidgetExampleForms.xml (original)
+++ ofbiz/branches/jquery/framework/example/widget/example/FormWidgetExampleForms.xml Mon Sep 27 15:44:37 2010
@@ -231,9 +231,6 @@ under the License.
<!-- ****************************** -->
<!-- *** Autocomplete dropdown *** -->
<!-- ****************************** -->
- <!-- most feature rich for autocomplete, ie partial text entry searches the full string,
- doesn't require custom request to function, etc; Note that for usability this is still a bit lame since you can't see the full list,
- you HAVE to know part of the ID or description in order to see options -->
<!-- TODO : return only the Id, else you need to edit the field to remove the description -->
<field name="emptyField1" title="${uiLabelMap.CommonEmptyHeader}"><display/></field>
<field name="geoId" title="${uiLabelMap.ExampleAutocompleteDropdown}"
@@ -241,7 +238,7 @@ under the License.
<drop-down>
<auto-complete/>
<entity-options entity-name="Geo" description="${geoId}: ${geoName}">
- <entity-constraint name="geoTypeId" value="GROUP"/>
+ <entity-constraint name="geoTypeId" value="COUNTRY"/>
<entity-order-by field-name="geoName"/>
</entity-options>
</drop-down>
Modified: ofbiz/branches/jquery/framework/images/webapp/images/selectall.js
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/selectall.js?rev=1001789&r1=1001788&r2=1001789&view=diff
==============================================================================
--- ofbiz/branches/jquery/framework/images/webapp/images/selectall.js (original)
+++ ofbiz/branches/jquery/framework/images/webapp/images/selectall.js Mon Sep 27 15:44:37 2010
@@ -458,24 +458,102 @@ function setLookDescription(textFieldId,
}
}
-/** Enable auto-completion for drop-down elements.
- * @param descriptionElement The id of the text field
- * @param hiddenElement The id of the drop-down. Used as the id of hidden field inserted.
- * @param data Choices for Autocompleter.Local, form of: {key: 'description',.......}
- * @param options
-*/
+/** Enable auto-completion for drop-down elements.*/
-function ajaxAutoCompleteDropDown(descriptionElement, hiddenElement, data, options) {
- // TODO is still old fashined :-)
- var update = hiddenElement + "_autoCompleterOptions";
- $(descriptionElement).insert({after: '<div class="autocomplete"' + 'id=' + update + '></div>'});
- new Autocompleter.Local($(descriptionElement), update, $H(data), {autoSelect: options.autoSelect, frequency: options.frequency, minChars: options.minChars, choices: options.choices, partialSearch: options.partialSearch, partialChars: options.partialChars, ignoreCase: options.ignoreCase, fullSearch: options.fullSearch, afterUpdateElement: setKeyAsParameter});
+function ajaxAutoCompleteDropDown() {
+ jQuery.widget( "ui.combobox", {
+ _create: function() {
+ var self = this;
+ var select = this.element.hide(),
+ selected = select.children( ":selected" ),
+ value = selected.val() ? selected.text() : "";
+ var input = jQuery( "<input>" )
+ .insertAfter( select )
+ .val( value )
+ .autocomplete({
+ delay: 0,
+ minLength: 0,
+ source: function( request, response ) {
+ var matcher = new RegExp( jQuery.ui.autocomplete.escapeRegex(request.term), "i" );
+ response( select.children( "option" ).map(function() {
+ var text = jQuery( this ).text();
+ if ( this.value && ( !request.term || matcher.test(text) ) )
+ return {
+ label: text.replace(
+ new RegExp(
+ "(?![^&;]+;)(?!<[^<>]*)(" +
+ jQuery.ui.autocomplete.escapeRegex(request.term) +
+ ")(?![^<>]*>)(?![^&;]+;)", "gi"
+ ), "<strong>$1</strong>" ),
+ value: text,
+ option: this
+ };
+ }) );
+ },
+ select: function( event, ui ) {
+ ui.item.option.selected = true;
+ //select.val( ui.item.option.value );
+ self._trigger( "selected", event, {
+ item: ui.item.option
+ });
+ },
+ change: function( event, ui ) {
+ if ( !ui.item ) {
+ var matcher = new RegExp( "^" + jQuery.ui.autocomplete.escapeRegex( jQuery(this).val() ) + "$", "i" ),
+ valid = false;
+ select.children( "option" ).each(function() {
+ if ( this.value.match( matcher ) ) {
+ this.selected = valid = true;
+ return false;
+ }
+ });
+ if ( !valid ) {
+ // remove invalid value, as it didn't match anything
+ jQuery( this ).val( "" );
+ select.val( "" );
+ return false;
+ }
+ }
+ }
+ })
+ //.addClass( "ui-widget ui-widget-content ui-corner-left" );
+
+ input.data( "autocomplete" )._renderItem = function( ul, item ) {
+ return jQuery( "<li></li>" )
+ .data( "item.autocomplete", item )
+ .append( "<a>" + item.label + "</a>" )
+ .appendTo( ul );
+ };
+
+ jQuery( "<a> </a>" )
+ .attr( "tabIndex", -1 )
+ .attr( "title", "Show All Items" )
+ .insertAfter( input )
+ .button({
+ icons: {
+ primary: "ui-icon-triangle-1-s"
+ },
+ text: false
+ })
+ .removeClass( "ui-corner-all" )
+ .addClass( "ui-corner-right ui-button-icon" )
+ .click(function() {
+ // close if already visible
+ if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
+ input.autocomplete( "close" );
+ return;
+ }
+
+ // pass empty string as value to search for, displaying all results
+ input.autocomplete( "search", "" );
+ input.focus();
+ });
+ }
+ });
- function setKeyAsParameter(text, li) {
- $(hiddenElement).value = li.id;
- }
}
+
/** Toggle area visibility on/off.
* @param link The <a> element calling this function
* @param areaId The id of the HTML container to toggle
Modified: ofbiz/branches/jquery/framework/widget/src/org/ofbiz/widget/form/MacroFormRenderer.java
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/widget/src/org/ofbiz/widget/form/MacroFormRenderer.java?rev=1001789&r1=1001788&r2=1001789&view=diff
==============================================================================
--- ofbiz/branches/jquery/framework/widget/src/org/ofbiz/widget/form/MacroFormRenderer.java (original)
+++ ofbiz/branches/jquery/framework/widget/src/org/ofbiz/widget/form/MacroFormRenderer.java Mon Sep 27 15:44:37 2010
@@ -1967,7 +1967,7 @@ public class MacroFormRenderer implement
} else {
autoCompleterTarget = lookupFieldFormName + "&amp;";
}
- autoCompleterTarget = autoCompleterTarget + "ajaxLookup=Y&amp;searchValueField=" + lookupField.getModelFormField().getParameterName(context);
+ autoCompleterTarget = autoCompleterTarget + "ajaxLookup=Y";
updateAreas = FastList.newInstance();
updateAreas.add(new ModelForm.UpdateArea("change", id, autoCompleterTarget));
}
Modified: ofbiz/branches/jquery/framework/widget/templates/htmlFormMacroLibrary.ftl
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/widget/templates/htmlFormMacroLibrary.ftl?rev=1001789&r1=1001788&r2=1001789&view=diff
==============================================================================
--- ofbiz/branches/jquery/framework/widget/templates/htmlFormMacroLibrary.ftl (original)
+++ ofbiz/branches/jquery/framework/widget/templates/htmlFormMacroLibrary.ftl Mon Sep 27 15:44:37 2010
@@ -142,13 +142,8 @@ under the License.
</#macro>
<#macro renderDropDownField name className alert id multiple formName otherFieldName event action size firstInList currentValue explicitDescription allowEmpty options fieldName otherFieldName otherValue otherFieldSize dDFCurrent ajaxEnabled noCurrentSelectedKey ajaxOptions frequency minChars choices autoSelect partialSearch partialChars ignoreCase fullSearch>
-<#if ajaxEnabled><input type="text"<#else><select</#if> name="${name?default("")}<#rt/>
-<#if ajaxEnabled>
-_description"<#if id?has_content> id="${id}_description"</#if><#if currentValue?has_content> value="${explicitDescription}"</#if>/><#rt/>
-<input type="hidden" name="${name}"<#if id?has_content> id="${id}"</#if><#if currentValue?has_content> value="${currentValue}"</#if>/><#rt/>
-<script language="JavaScript" type="text/javascript">var data = {${ajaxOptions}};ajaxAutoCompleteDropDown('<#if id?has_content>${id}_description</#if>','${id}',data,{autoSelect:${autoSelect},frequency:${frequency},minChars:${minChars},choices:${choices},partialSearch:${partialSearch},partialChars:${partialChars},ignoreCase:${ignoreCase},fullSearch:${fullSearch}});</script>
-<#else>
-" <@renderClass className alert /><#if id?has_content> id="${id}"</#if><#if multiple?has_content> multiple="multiple"</#if><#if otherFieldSize gt 0> onchange="process_choice(this,document.${formName}.${otherFieldName})"</#if><#if event?has_content> ${event}="${action}"</#if><#if size?has_content> size="${size}"</#if>>
+<span class="ui-widget">
+<select name="${name?default("")}<#rt/>" <@renderClass className alert /><#if id?has_content> id="${id}"</#if><#if multiple?has_content> multiple="multiple"</#if><#if otherFieldSize gt 0> onchange="process_choice(this,document.${formName}.${otherFieldName})"</#if><#if event?has_content> ${event}="${action}"</#if><#if size?has_content> size="${size}"</#if>>
<#if firstInList?has_content && currentValue?has_content && !multiple?has_content>
<option selected="selected" value="${currentValue}">${explicitDescription}</option><#rt/>
<option value="${currentValue}">---</option><#rt/>
@@ -164,6 +159,7 @@ _description"<#if id?has_content> id="${
</#if>
</#list>
</select>
+</span>
<#if otherFieldName?has_content>
<noscript><input type='text' name='${otherFieldName}' /></noscript>
<script type='text/javascript' language='JavaScript'><!--
@@ -175,7 +171,16 @@ if(disa && document.styleSheets)
document.${formName}.${fieldName}.style.visibility = 'hidden';
//--></script>
</#if>
+
+<#if ajaxEnabled>
+<script language="JavaScript" type="text/javascript">
+ ajaxAutoCompleteDropDown();
+ jQuery(function() {
+ jQuery("#${id}").combobox();
+ });
+</script>
</#if>
+
</#macro>
<#macro renderCheckField items className alert id allChecked currentValue name event action>
Modified: ofbiz/branches/jquery/themes/tomahawk/webapp/tomahawk/css/style.css
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/themes/tomahawk/webapp/tomahawk/css/style.css?rev=1001789&r1=1001788&r2=1001789&view=diff
==============================================================================
--- ofbiz/branches/jquery/themes/tomahawk/webapp/tomahawk/css/style.css (original)
+++ ofbiz/branches/jquery/themes/tomahawk/webapp/tomahawk/css/style.css Mon Sep 27 15:44:37 2010
@@ -2778,6 +2778,12 @@ button.ui-button::-moz-focus-inner { bor
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; }
+
+.ui-button { margin-left: -1px; }
+.ui-button-icon-only .ui-button-text { padding: 0.35em; }
+.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
+
+
/* Calendar Button and Image */
.view-calendar button {
background: url(../images/cal.png) no-repeat !important;