deepak-rajpal
9/14/2015 - 11:27 AM

Rates Autocomplete dropdown and redirect:-- > 1) Create JS Arrary using xml elements fetch, 2) Fetch array and autocomplete dropdown, 3) Bas

Rates Autocomplete dropdown and redirect:-- > 1) Create JS Arrary using xml elements fetch, 2) Fetch array and autocomplete dropdown, 3) Based on dropdown information, redirect into the commodity detail page.

create-commodity-arrary-from-xml-elements.php
content_copyfile_download
<?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
		}
	}
	?>
autocomplete-dropdown-using-js-array.php
content_copyfile_download
<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>