Need help with Auto Complete Script

Greenhorn

Posts: 4

posted 10 years ago

Hi, recently my clients have asked me to change all the text input types to the auto complete suggestion boxes(Thanks to google's Auto Complete...)
I am good at server side programming but dont know how to make this work. If any one can suggest me some good script or tutorial , it will be really helpful.

Thanks in advance.

Regards,
Javagenious

Bear Bibeault

Marshal

Posts: 67356

173

I like...

posted 10 years ago

Please take the time to choose the correct forum for your posts. This forum is for questions on JSP. For more information, please read this.

This post has been moved to a more appropriate forum.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Justin Fox

Ranch Hand

Posts: 802

posted 10 years ago

auto complete is pretty easy actually, I believe <input type="text"/> has an event called onKeyUp, so you can get the text in the textbox every time they type...

so if they were typing 'Nike'

when they type the 'N' query your shoes table for 'Like "N%" '.

results for example:

New Balance
Nike

and then when they type 'Ni' query your shoes table for ' Like "Ni%" '.

results:

Nike

To do this you'll probably need to use ajax, because refreshing the page would look silly.

Justin

You down with OOP? Yeah you know me!

Sandy Joshi

Greenhorn

Posts: 4

posted 10 years ago

HI,
Thanks for the response. Can you give me any Hint how can i handle that in Ajax. I mean how can i send the string which i capture on keyup and prepare an Ajax request for the same.

Thanks

Regards,
Javagenious

Justin Fox

Ranch Hand

Posts: 802

posted 10 years ago

function AJAXLib(URL)
{
this.URL = URL;
var responseT = "empty";

this.ExecuteNoParam = function(){
var ajaxRequest;

try
{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} 
catch (e)
{
	// Internet Explorer Browsers
	try
	{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} 
	catch (e) 
	{
		try
		{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			
		} 
		catch (e)
		{
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}

ajaxRequest.onreadystatechange = function()
	{
		if(ajaxRequest.readyState == 4)
		{
			//nothing;
		}
	}

ajaxRequest.open("GET", this.URL, true);
ajaxRequest.send(null);
 
}//End Execute() Function

this.Execute = function(myfunctionref){
var ajaxRequest;

ajaxRequest.onreadystatechange = function()
	{
		if(ajaxRequest.readyState == 4)
		{
			myfunctionref(ajaxRequest.responseText);
		}
	}

ajaxRequest.open("GET", this.URL, true);
ajaxRequest.send(null);
 
}//End Execute(myfunctionref) Function
}//End AJAXLib Class

the code above, just put into a file and save as AJAXLib.js

In the <head></head> of your html file just put:

<script type = "text/javascript" src = "directory/AJAXLib.js"></script>

now in a function that you call on onKeyUp, we'll call it autoComplete(this.value).
So the tag would look like <input type="Text" onclick="autoComplete(this.value)" />

and...

The reason you have to make a callBackFunction is because when you make an ajax request, the response doesn't happen right away so you have to make a callbackfunction to handle the event when the response is ready to be dealt with.

Justin

You down with OOP? Yeah you know me!

look! it's a bird! it's a plane! It's .... a teeny tiny ad

Sauce Labs - World's Largest Continuous Testing Cloud for Websites and Mobile Apps

https://coderanch.com/t/722574/Sauce-Labs-World-Largest-Continuous