AJAX suggest

tinapa · Dec 30, 2008

hi guys, do you have any ideas how i could make this ajax suggest show a drop-down instead of writing the text on the page?

and also after showing the texts on drop-down and i select something, it'll transfer the value to the textfield.

http://www.w3schools.com/ajax/ajax_example_suggest.asp

any ideas is highly appreciated.

.

feherke · Dec 30, 2008

Hi

I would say better search for a suitable one.

Feherke.

http://rootshell.be/~feherke/

johnwm · Dec 31, 2008

The example you show is only intended to give you the idea - it is not suitable for production code. For your question you simply change gethint.asp to return the appropriate HTML for your dropdown. As feherke says there are plenty of other examples out there.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

tinapa · Dec 31, 2008

thnx guys. happy new year!!!

Zhris · Jan 1, 2009

Hello,

I used the W3schools example to write an Ajax script which fufills Tina's requirements. I am also practicing Ajax/Javascript therefore this is a good learning exercise for me and any critisms would be appreciated. Note that I have never used ASP therefore my backend script is written in Perl...

1 question: how could I edit the script so that it performs identically, but the <select> tags (opening and closing of the menu) are within the Html instead of the Perl. I have tried using <select id="select"> in replacement of <span id="select"> which doesn't work correctly.

index.htm

Code:

<html>
	<head>
        <style type="text/css">
			body{font-family:Arial;font-size:10pt;font-weight:bold;}
			p{margin:10px;}
		</style>
		
		<script type="text/javascript" language="javascript">
			//////////////////////////////////////////////////////////////////
			var xmlHttp=null;
			function http_req(inpval){
				if(inpval.length==0){ 
					document.getElementById("select").innerHTML="";
					document.form.textbox2.value="";
					return;
				}
				try{// Firefox, Opera 8.0+, Safari, IE7
  					xmlHttp=new XMLHttpRequest();
 				 }
				catch(e){// Old IE
					try{
						xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
					}
					catch(e){
						alert ("Your browser does not support XMLHTTP!");
						return;  
					}
				}
				var url="perl.pl?textbox1=" + inpval;
				url=url+"&sid="+Math.random();
				xmlHttp.open("GET",url,false);
				xmlHttp.send(null);
				document.getElementById("select").innerHTML=xmlHttp.responseText;
			}
			//////////////////////////////////////////////////////////////////
			function printval(suggesval){document.form.textbox2.value=suggesval;}
			//////////////////////////////////////////////////////////////////
		</script>
	</head>
	
	<body>
		<form name="form">
			<p>Input: <input type="text" onKeyUp="http_req(this.value)"></input></p>
			
			<p>Suggestions: <span id="select"></span></p>
					
			<p>Output: <input type="text" id="textbox2" disabled="true"></input></p>
			
			<p><input type="submit" value="Process Output"></input></p>
		</form>
	</body>
</html>

perl.pl

Code:

#! /usr/bin/perl
use strict;
use CGI ':standard';
print "Content-type: text/html\n\n";

my $input = param('textbox1');
my @suggestions = qw(Andrew Amy Alex Ben Betty Chris Carl Christine Donna Daniel Emily Fred Francis Geoff);
print qq(<select onChange="printval(this.value)">);
print qq(<option>>>>>></option>);
foreach(@suggestions){
	if($_=~m/^$input/i){
		print qq(<option value="$_">$_</option>);
	}
}
print qq(</select>);

Chris

johnwm · Jan 2, 2009

You don't appear to have a <select> with an id of 'select'

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

Zhris · Jan 2, 2009

The code I posted was the best working version. When I tried using a <select> with an id of select within the html, the options were never printed between. Its not a big issue, just I am confused as to why it will work the way it currently is but not the way I want it to work.

Thanks,
Chris

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

AJAX suggest

tinapa

Technical User

feherke

Programmer

johnwm

Programmer

tinapa

Technical User

Zhris

Programmer

johnwm

Programmer

Zhris

Programmer

Similar threads

Part and Inventory Search

Sponsor