Page Comparison

...

<openmrs:htmlInclude file="/dwr/interface/DWREncounterService.js"/>
<openmrs:htmlInclude file="/scripts/jquery/dataTables/css/dataTables_jui.css"/>
<openmrs:htmlInclude file="/scripts/jquery/dataTables/js/jquery.dataTables.min.js"/>
<openmrs:htmlInclude file="/scripts/jquery-ui/js/openmrsSearch.js" />

<script type="text/javascript">
	var lastSearch;
	$j(document).ready(function() {
		new OpenmrsSearch("findEncounter", true, doEncounterSearch, doSelectionHandler,
				[	{fieldName:"personName", header:"Patient Name},
					{fieldName:"encounterType", header:"Encounter Type},
					{fieldName:"formName", header:"Encounter Form},
					{fieldName:"providerName", header:"Encounter Provider},
					{fieldName:"location", header:"Encounter Location},
					{fieldName:"encounterDateString", header:"Encounter Date}
				],
                {
                    searchLabel: '<spring:message code="Encounter.search" javaScriptEscape="true"/>',
                    searchPlaceholder:'<spring:message code="Encounter.search.placeholder" javaScriptEscape="true"/>'
                });
	});

        //The action to take when the user selects an item from the hits in the widget
	function doSelectionHandler(index, data) {
		document.location = "encounter.form?encounterId=" + data.encounterId + "&phrase=" + lastSearch;
	}

	//Contains the logic that fetches the hitsresults from the server
	function doEncounterSearch(text, resultHandler, getMatchCount, opts) {
		lastSearch = text;
		DWREncounterService.findCountAndEncounters(text, opts.includeVoided, opts.start, opts.length, getMatchCount, resultHandler);
	}
</script>

...

Next thing is to initialize the widget and there 2 ways to do it, the one used above is one of them which uses a convenience constructor helper function that takes in 4 arguments and the rest of the other widget properties are passed using an array. Below is the other way where all the properties are passed using an array:

$j(document).ready(function() {
  		$j("#elementId").openmrsSearch({
  			searchLabel:'<spring:message code="General.search"/>',
  			searchPlaceholder: '<spring:message code="Encounter.search.placeholder" javaScriptEscape="true"/>',
  			searchHandler: doSearchHandler,
  			selectionHandler: doSelectionHandler,
  			fieldsAndHeaders: [	{fieldName:"personName", header:"Patient Name},
					{fieldName:"encounterType", header:"Encounter Type},
					{fieldName:"formName", header:"Encounter Form},
					{fieldName:"providerName", header:"Encounter Provider},
					{fieldName:"location", header:"Encounter Location},
					{fieldName:"encounterDateString", header:"Encounter Date}
				]
  		});
  	});

The arguments passed to the widgets are to used to customize the widget properties, in the example above, 'searchLabel' specifies the label that appears to the left of the search input box, 'searchPlaceHolder' specifies the text to to display inside the input box as a place holder, 'searchHandler' specifies the javascript function to be called to fetch the hits from the server, and 'fieldsAndHeaders' specifies the properties of the objects in the returned list should match the field names specified for the fieldsAndHeaders property.returned objects to display along with their respective column headers See below for the full list of the widget properties.

Widget properties

• minLength: int (default: 1) The minimum number of characters required to trigger a search, this is ignored if 'doSearchWhenEmpty' is set to true
• searchLabel: string (default: omsgs.searchLabel) The text to be used as the label for the search textbox
• includeVoidedLabel: string (default: omsgs.includeVoided) The text to be used as the label for the 'includeVoided' checkbox
• showIncludeVoided: bool (default: false) - Specifies whether the 'includeVoided' checkbox and label should be displayed
• includeVerboseLabel: string (default: omsgs.includeVerbose) The text to be used as the label for the 'includeVerbose' checkbox
• showIncludeVerbose: bool (default: false) Specifies whether the 'includeVerbose' checkbox and label should be displayed
• searchHandler: function(text, resultHandler, options) (default:null) The function to be called to fetch search results from the server
• resultsHandler: function(results) (default:null) The function to be called
• selectionHandler: function(index, rowData
• fieldsAndHeaders: Array of fieldNames and column header maps
• displayLength: int (default: 10)
• columnWidths: an array of column widths, the length of the array should be equal to the number of columns
• columnRenderers: array of fnRender(s) for each column
• columnVisibility: array of bVisible values for each column
• initialData: (default: null) The initial data to be displayed e.g if it is an encounter search, it should be an encounter list
• searchPhrase: string The phrase to be set in the search box so that a search is triggered on page load to display initial items
• doSearchWhenEmpty: string (default:false): If it is set to true, it lists all items initially and filters them with the given search phrase.
• verboseHandler: function to be called to return the text to display as verbose output