deepak-rajpal/autocomplete-dropdown-using-js-array.php

## autocomplete-dropdown-using-js-array.php
<body>
<script>
	// JS array (commodityList) to store all Commodity for autocomplete dropdown.
	var commodityList = new Array();
	// JS object to store all Commodity with additional information. Useful to create form action url after submit.
	var commodityInfo = new Object();
</script>
<script>
	var commodityName = "Soybeans (comp) cvoi1";
	var type= "Grains";
	var subType= "soybeans";
	// Store all commodity information in array and object.
	commodityList.push(commodityName);
	commodityInfo[commodityName] = [type,subType];
</script>g
<script>
	var commodityName = "London Cocoa cvoi1";
	var type= "Softs";
	var subType= "cocoalondon";
	// Store all commodity information in array and object.
	commodityList.push(commodityName);
	commodityInfo[commodityName] = [type,subType];
</script>
<script>
$(function() {
	$( "#autocomplete" ).autocomplete({
		source: commodityList
	});
});
// alert(JSON.stringify(commodityInfo));
function goCommodityPage(){
	var currentCommodity = $("input#autocomplete").val();
	/* If current commodity is not-valid/not-found then location url will not have all commodity info */
	if(($.inArray(currentCommodity, commodityList)) == -1) {

		var commodity_url = "http://mysite.com/rates-page/commodity-detail-page/?commodity_name="+currentCommodity+"&type=&sub_type=&category=";
		window.location.href = commodity_url;
	} else {
		var type = commodityInfo[currentCommodity][0];
		var subType = commodityInfo[currentCommodity][1];
		// "fullname" is used in url instead of existing "name" to avoid wordpress page issue. It redirects to search page.
		var commodity_url = "http://mysite.com/rates-page/commodity-detail-page/?commodity_name="+currentCommodity+"&type="+type+"&sub_type="+subType+"&category="+type;
		window.location.href = commodity_url;
	}
}
</script>
<div id="commodity-container">
	<form id="currencyPairForm" method="get" onsubmit="return false;">
		<p>
			<label for="searchAppText">Jump to a Commodity:  </label>
			<input type="text" onclick="this.value='';" id="autocomplete" value="Commodity">
			<img style="padding-left: 5px; cursor:hand" src="http://mysite.com/images/submit_button.gif">
			<input type="button" name="goBtn" onclick="goCommodityPage();" style="cursor:pointer" value="Go">
		</p>
	</form>
</div>

</body>

## create-commodity-arrary-from-xml-elements.php
<?php
$xml = new SimpleXMLElement($xml_data);
	foreach ($xml->children() as $second_gen) {
		foreach ($second_gen->children() as $third_gen)
		{
			?>
			<script>
				var commodityName = "<?php echo $third_gen->commodityName; ?>";
				var type= "<?php echo $third_gen->type; ?>";
				var subType= "<?php echo $third_gen->subType; ?>";
				// Store all commodity information in array and object.
				commodityList.push(commodityName);
				commodityInfo[commodityName] = [type,subType];
			</script>
		<?php
		}
	}
	?>
	<body>
	<script>
	// JS array (commodityList) to store all Commodity for autocomplete dropdown.
	var commodityList = new Array();
	// JS object to store all Commodity with additional information. Useful to create form action url after submit.
	var commodityInfo = new Object();
	</script>
	<script>
	var commodityName = "Soybeans (comp) cvoi1";
	var type= "Grains";
	var subType= "soybeans";
	// Store all commodity information in array and object.
	commodityList.push(commodityName);
	commodityInfo[commodityName] = [type,subType];
	</script>g
	<script>
	var commodityName = "London Cocoa cvoi1";
	var type= "Softs";
	var subType= "cocoalondon";
	// Store all commodity information in array and object.
	commodityList.push(commodityName);
	commodityInfo[commodityName] = [type,subType];
	</script>
	<script>
	$(function() {
	$( "#autocomplete" ).autocomplete({
	source: commodityList
	});
	});
	// alert(JSON.stringify(commodityInfo));
	function goCommodityPage(){
	var currentCommodity = $("input#autocomplete").val();
	/* If current commodity is not-valid/not-found then location url will not have all commodity info */
	if(($.inArray(currentCommodity, commodityList)) == -1) {

	var commodity_url = "http://mysite.com/rates-page/commodity-detail-page/?commodity_name="+currentCommodity+"&type=&sub_type=&category=";
	window.location.href = commodity_url;
	} else {
	var type = commodityInfo[currentCommodity][0];
	var subType = commodityInfo[currentCommodity][1];
	// "fullname" is used in url instead of existing "name" to avoid wordpress page issue. It redirects to search page.
	var commodity_url = "http://mysite.com/rates-page/commodity-detail-page/?commodity_name="+currentCommodity+"&type="+type+"&sub_type="+subType+"&category="+type;
	window.location.href = commodity_url;
	}
	}
	</script>
	<div id="commodity-container">
	<form id="currencyPairForm" method="get" onsubmit="return false;">
	<p>
	<label for="searchAppText">Jump to a Commodity: </label>
	<input type="text" onclick="this.value='';" id="autocomplete" value="Commodity">
	<img style="padding-left: 5px; cursor:hand" src="http://mysite.com/images/submit_button.gif">
	<input type="button" name="goBtn" onclick="goCommodityPage();" style="cursor:pointer" value="Go">
	</p>
	</form>
	</div>

	</body>
	<?php
	$xml = new SimpleXMLElement($xml_data);
	foreach ($xml->children() as $second_gen) {
	foreach ($second_gen->children() as $third_gen)
	{
	?>
	<script>
	var commodityName = "<?php echo $third_gen->commodityName; ?>";
	var type= "<?php echo $third_gen->type; ?>";
	var subType= "<?php echo $third_gen->subType; ?>";
	// Store all commodity information in array and object.
	commodityList.push(commodityName);
	commodityInfo[commodityName] = [type,subType];
	</script>
	<?php
	}
	}
	?>