← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 5892: (patient) Add autocomplete field instead of combobox for optionset dataelement in data entry form.

 

------------------------------------------------------------
revno: 5892
committer: Tran Chau <tran.hispvietnam@xxxxxxxxx>
branch nick: dhis2
timestamp: Wed 2012-02-08 21:07:28 +0700
message:
  (patient) Add autocomplete field instead of combobox for optionset dataelement in data entry form.
modified:
  dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataEntryForm.vm
  dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/entry.js
  dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/dataEntry.css


--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk

Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataEntryForm.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataEntryForm.vm	2012-02-07 08:39:49 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataEntryForm.vm	2012-02-08 14:07:28 +0000
@@ -1,3 +1,4 @@
+
 <script>
 	jQuery("#entryFormContainer").ready(function(){
 	
@@ -23,6 +24,15 @@
 			enable('executionDate');
 		}
 		entryFormContainerOnReady();
+		
+		jQuery("#entryForm :input").each(function()
+		{ 
+			if( jQuery(this).attr( 'options' )!= null )
+			{
+				autocompletedField(jQuery(this).attr('id'));
+			}
+		});
+			
 	});
 </script>
 
@@ -93,7 +103,7 @@
 						#set( $id = $programStageDataElement.programStage.id + '-' + $programStageDataElement.dataElement.id + '-val' )
 						#if( $!programStageDataElement.dataElement.optionSet )
 							#set( $id = $programStageDataElement.programStage.id + '-' + $programStageDataElement.dataElement.id + '-' + $optionCombo.id + '-val' )
-							<select name="entryselect" data="{compulsory: $programStageDataElement.compulsory, deName:'$programStageDataElement.dataElement.name', deType:'$programStageDataElement.dataElement.getDetailedNumberType()' }" #if($programStageInstance.completed) disabled="disabled" #end id="$id" onchange="saveVal( $programStageDataElement.dataElement.id, $optionCombo.id )" tabindex="$tabIndex">              
+							<select name="entryselect" options='$programStageDataElement.dataElement.optionSet.options' data="{compulsory: $programStageDataElement.compulsory, deName:'$programStageDataElement.dataElement.name', deType:'$programStageDataElement.dataElement.getDetailedNumberType()' }" #if($programStageInstance.completed) disabled="disabled" #end id="$id" onchange="saveVal( $programStageDataElement.dataElement.id, $optionCombo.id )" tabindex="$tabIndex">              
 								<option value="">[$i18n.getString( "select_value" )]</option>
 								#foreach( $option in $programStageDataElement.dataElement.optionSet.options )
 									<option value="$option" #if( $patientDataValue.value == $option ) selected="selected" #end>$encoder.htmlEncode( $option )</option>

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/entry.js'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/entry.js	2012-02-06 02:56:02 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/entry.js	2012-02-08 14:07:28 +0000
@@ -144,12 +144,14 @@
 {
 	var programStageId = byId('programStageId').value;
 	var fieldId = programStageId + '-' + dataElementId + '-' + optionComboId + '-val';
+	
+	var field = byId( fieldId ); 
+	var fieldValue = jQuery.trim( field.value );
+
 	var data = jQuery( "#" + fieldId ).metadata({
         type:'attr',
         name:'data'
     });
-	var field = byId( fieldId ); 
-	//var fieldValue = ( field.name = 'entryselect' ) ? 
 	
 	var dataElementName = data.deName; 
     var type = data.deType;
@@ -157,11 +159,11 @@
  
 	field.style.backgroundColor = '#ffffcc';
     
-    if( field.value != '' )
+    if( fieldValue != '' )
     {
         if ( type == 'int' || type == 'number' || type == 'positiveNumber' || type == 'negativeNumber' )
         {
-            if (  type == 'int' && !isInt( field.value ))
+            if (  type == 'int' && !isInt( fieldValue ))
             {
                 field.style.backgroundColor = '#ffcc00';
 
@@ -171,7 +173,7 @@
 
                 return;
             }
-			else if ( type == 'number' && !isRealNumber( field.value ) )
+			else if ( type == 'number' && !isRealNumber( fieldValue ) )
             {
                 field.style.backgroundColor = '#ffcc00';
                 window.alert( i18n_value_must_number + '\n\n' + dataElementName );
@@ -179,7 +181,7 @@
 
                 return;
             } 
-			else if ( type == 'positiveNumber' && !isPositiveInt( field.value ) )
+			else if ( type == 'positiveNumber' && !isPositiveInt( fieldValue ) )
             {
                 field.style.backgroundColor = '#ffcc00';
                 window.alert( i18n_value_must_positive_integer + '\n\n' + dataElementName );
@@ -187,7 +189,7 @@
 
                 return;
             } 
-			else if ( type == 'negativeNumber' && !isNegativeInt( field.value ) )
+			else if ( type == 'negativeNumber' && !isNegativeInt( fieldValue ) )
             {
                 field.style.backgroundColor = '#ffcc00';
                 window.alert( i18n_value_must_negative_integer + '\n\n' + dataElementName );
@@ -199,7 +201,7 @@
     	
     }
     
-	var valueSaver = new ValueSaver( dataElementId, optionComboId,  field.value, providedByAnotherFacility, type, '#ccffcc'  );
+	var valueSaver = new ValueSaver( dataElementId, optionComboId,  fieldValue, providedByAnotherFacility, type, '#ccffcc'  );
     valueSaver.save();
 }
 
@@ -208,7 +210,6 @@
 	var programStageId = byId('programStageId').value;
 	var fieldId = programStageId + '-' + dataElementId + '-val';
 	var field = jQuery( "#" + fieldId ); 
-	var fieldValue = field.val();
 	var data = field.metadata({
         type:'attr',
         name:'data'
@@ -216,7 +217,7 @@
 	
     var providedByAnotherFacility = document.getElementById( programStageId + '_' + dataElementId + '_facility' ).checked;
 	
-    var dateSaver = new DateSaver( dataElementId, fieldValue, providedByAnotherFacility, '#ccffcc' );
+    var dateSaver = new DateSaver( dataElementId, field.val(), providedByAnotherFacility, '#ccffcc' );
     dateSaver.save();
 }
 
@@ -817,4 +818,63 @@
 		{   
 			loadDataEntry();
 		});
+}
+
+function autocompletedField( idField )
+{
+	hideById( idField );
+	var select = jQuery( "#" + idField );
+	var input = $("<input onkeypress='return keyPress(event, this);' name='entryfield' class='inputText'>")
+		.insertAfter(select)
+		.autocomplete({
+			source: function(request, response) {
+				var matcher = new RegExp(request.term, "i");
+				response(select.children("option").map(function() {
+					var text = $(this).text();
+					if (this.value && (!request.term || matcher.test(text)))
+						return {
+							id: this.value,
+							label: text,
+							value: text
+						};
+				}));
+			},
+			delay: 0,
+			change: function(event, ui) {
+				if (!ui.item) {
+					// remove invalid value, as it didn't match anything
+					$(this).val("");
+					return false;
+				}
+				select.val(ui.item.id);
+				select.change();
+			},
+			minLength: 0
+		});
+
+	// Set default value of the combobox
+	input.val( $("#" + idField + " option:selected").text());
+	$("<button>&nbsp;</button>")
+	.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("small-button 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();
+	}).change(function(){
+		select.change();
+	});
 }
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/dataEntry.css'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/dataEntry.css	2012-02-01 09:10:08 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/dataEntry.css	2012-02-08 14:07:28 +0000
@@ -92,4 +92,8 @@
   float: right;
   width:200px;
   text-align: right;
+}
+
+.small-button {
+	font-size: .8em !important;
 }
\ No newline at end of file