?
Solved

positing the suggestion box

Posted on 2008-10-12
1
Medium Priority
?
1,416 Views
Last Modified: 2011-10-03
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

0
Comment
Question by:priyapratheep
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 1

Accepted Solution

by:
mysticamusic earned 1500 total points
ID: 22700579
Your HTML code is not correct . I have modified your HTML code..
Please try my file...
<!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 {
		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>
	
	<div>
	<form>
		<table width="" border="0" cellpadding="1" cellspacing="0" bgcolor="#4682b4">
			
			<table width="100%" border="0" cellpadding="4" cellspacing="1">
				
				<tr class="data1">
				<td>Enter the Manufacturer name:</td>
				<td>:</td>
				<td>
				<input type="text" size="30" value="" name="emp_name" id="inputString" onkeyup="lookupName(this.value);" onblur="fill();" />
				<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>
				<input type="text" size="30" value="" name="emp_id" id="inputString1" onkeyup="lookup1(this.value);" onblur="fill1();" />
				<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>
				
			<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

0

Featured Post

Setting up LaraDock for Laravel

Learn how to set up LaraDock in a Laravel project - LaraDock gives us an easy way to run a Laravel application using Docker in a single command.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question