asked on
positing the suggestion box

I want to display my suggestion box to display below the emp_id text box...now when i select emp id text box list is displaying near to emp name text box....

my code is below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Down Load Future Electronics Data</title>
 
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
	function lookupName(inputString) {
		if(inputString.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else {
			$.post("fut_ele_ByManName.jsp", {queryString: ""+inputString+""}, function(data){
				if(data.length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup
	
    function lookup1(inputString) {
		if(inputString.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else {
			$.post("fut_ele_ByRegoin.jsp", {queryString: ""+inputString+""}, function(data){
				if(data.length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup
 
	function fillName(thisValue) {
		$('#inputString').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}
    
      function fill1(thisValue) {
		$('#inputString1').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}
    
 
 
 
 
</script>
 
<script type="text/javascript">
function myfunction() {
 
 
  var email = document.getElementById('inputString1').value;
   alert(email);
}
</script>
 
 
<script type="text/javascript">
 
;$(function(){
	$("form").submit(function(){
		message($("input[name='emp_name']").val());
 
 
 
		return false;
	});
	
	$("input[name='ByRegion']").click(function(){
		message1($("input[name='emp_id']").val());
		return false;
	});
});
</script>
 
<script type="text/javascript">
function message(thisValue) {
location.href='futer_excel_byManuMain.jsp?man_name='+thisValue;
}
</script>
 
<script type="text/javascript">
function message1(thisValue) {
location.href='futer_excel_byRegionMain.jsp?emp_id='+thisValue;
}
</script>
 
	<LINK REL=stylesheet HREF="ssl.css" TYPE="text/css">
		<style type="text/css">
  <!--
    body {
    margin-left: 20px;
    margin-top: 20px;
    }
  -->
</style>
<style type="text/css">
	body {
		font-family: Helvetica;
		font-size: 11px;
		color: #000;
	}
	
	h3 {
		margin: 0px;
		padding: 0px;	
	}
 
	.suggestionsBox {
		position: relative;
		left: 30px;
		margin: 10px 0px 0px 0px;
		width: 200px;
		background-color: #3574EC7;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border: 2px solid #000;	
		color: #fff;
	}
	.suggestionsBox1 {
		position: relative;
		left: 200px;
		margin: 20px 0px 0px 0px;
		width: 700px;
		background-color: #3574EC7;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border: 2px solid #000;	
		color: #fff;
	}
	
	.suggestionList {
		margin: 0px;
		padding: 0px;
	}
	
	.suggestionList li {
		
		margin: 0px 0px 3px 0px;
		padding: 3px;
		cursor: pointer;
	}
	
	.suggestionList li:hover {
		background-color: #659CD8;
	}
</style>
 
</head>
 
<body>
 
 
		<H1>
			Download Data
		</H1>
		<BR>
 
 
	<div>
            <table width="" border="0" cellpadding="1" cellspacing="0" bgcolor="#4682b4">
		<tr>
		<td>
 
		<form >
 
		<table width="100%" border="0" cellpadding="4" cellspacing="1">
							<tr class="data1">
								<td>
									Enter the Manufacturer name:
								</td>
								<td>
									:
								</td>
 
<td>
 
 
			<div>
				
				<br />
				<input type="text" size="30" value="" name="emp_name" id="inputString" onkeyup="lookupName(this.value);" onblur="fill();" />
			</div>
			
			<div class="suggestionsBox" id="suggestions" style="display: none;">
				<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
				<div class="suggestionList" id="autoSuggestionsList">
					&nbsp;
				</div>
			</div>
			</td>
			</tr>
			<tr class="data2">
			<td>
			Region
			</td>
			<td>
			:
			</td>
			<td>
 
<div>
				
				<br />
				<input type="text" size="30" value="" name="emp_id" id="inputString1" onkeyup="lookup1(this.value);" onblur="fill1();" />
			</div>
			
			<div class="suggestionsBox1" id="suggestions" style="display: none;">
				<img src="" style="position: relative; top: -999px; left: 30px;" alt="" />
				<div class="suggestionList" id="autoSuggestionsList">
					&nbsp;
				</div>
			</div>
 
 
</td>
							</tr>
								</table>
				</td>
			</tr>
			<tr>
				<td align="center">
					<input type="Submit" name="Submit" value="Download By ManufacturerName" >
					<input type="button" name="ByRegion" value="Download By Region" >
 
				</td>
			</tr>
		</table>
 
		</form>
	</div>
 
</body>
</html>
Open in new window
ASKER CERTIFIED SOLUTION
mysticamusic
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial