Ajax Source code to Suggest application with JSP Server side

DrRakha

Hi,,
This is application i made .It is a well know application.The main idea that when the user hit a word in the text input .The Browser send this word to the server.The Server search for a words that start with the same as the input start and replay back with an HTML code include these words.The Browser then take this response words and view it to the users .An live example on this is the Google suggestion [color=#0000BF]Here[/color].In the server side i am using JSP.If you don't know JSP you can create your server page with the programming language you want for example (PHP,ASP,..etc).Also you can add more features to this small Ajax application .for example you can use the database to get the suggestion words like Google does.
Here is the JavaScript code which called (Ajaxsc.js)

Code:

// Ajaxsc.js
// doSuggest
/*
Writen by Mohamed Sami
Developer
Information Technology
mail :[email protected]
*/
function doSuggest(word) {
if(word.length>0)
{
var request=null;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}

if(request)
{
var url="Page1.jsp";
url+="?suggestword="+word;

request.open("POST",url);
request.onreadystatechange = function()
{

if(request.readyState==4)
   {
document.getElementById("theResults").innerHTML=request.responseText;
document.getElementById("theResults").style.visibility="visible";
   }

}
request.send(null);

}
else
{
alert("Your browser don't support AJax !");
}
}
else
{
document.getElementById("theResults").innerHTML="";
document.getElementById("theResults").style.visibility="hidden";
}

}

And here is the JSP code :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>

<TITLE>Page1.jsp</TITLE>
</HEAD>
<BODY>
<%
String suggetsword=request.getParameter("suggestword").toLowerCase();

String[] mySuggests=new String[]{"Anna","Apple","An","America","Ali","Ahmed"
,"Brittany","Ball","Cinderella","Car","Diana","Door","Eva","Ear"
,"Fiona","Fan","Gunda","Game","Hege","High","Inga","India","Johanna","Joomla"
,"Kitty","Kitkat","Linda","Loser","Nina","Noise","Ophelia","Open","Petunia"
,"People","Amanda","Area","Raquel","Rar","Cindy","Close","Doris","Do","Eve"
,"Event","Evita","Sunniva","Sun","Tove","Tall","Unni","Under","Violet","Vote"
,"Liza","Land","Elizabeth","English","Ellen","Wenche","Water","Vicky","Vila"};

out.println("<table width='100%' border='0' cellpadding='0' cellspacing='0'>");

for(int i=0;i<mySuggests.length;i++)
{
if(mySuggests[i].toLowerCase().startsWith((suggetsword.substring(0,1))))
{
out.print("<tr><td>"+mySuggests[i]+"</td></tr>");

}
}
out.println("</table>");
%>

</BODY>
</HTML>

Finally is the html code for the index page :

Code:

<HTML>
<HEAD>
<script type="text/javascript" src="Ajaxsc.js"></script>
<TITLE>index.html</TITLE>

</HEAD>
<BODY>

<INPUT type="text" size="50" id="text1" onkeyup="doSuggest(this.value);" />
<br/>

<div id = "theResults" style =
"width:22em;border:1px black solid;padding-left:2px;padding-right:2px; visibility: hidden">
</div>

</BODY>
</HTML>

Thats was all the files in the project .You can run it in your local host.But remember that you must have a JSP container to run the JSP file like (Tomcat , JBoss,..etc). If you faced any bugs while trying please reply my topic with the error , :smile:

dipesh3535

thanks

DrRakha

you are welcome .

fei7shi91

thanks for you sharing

tanaytandon

Thanks for sharing the solution. I have a question is there a way we can tweek your code so that if we select one of the items from the suggested list it populates into the text box.
Something like what happens in Google.

Thanks In Advance,
Tanay Tandon

Yoshimitzu

Yes, you can.
you have modify only one row in Page1.jsp, in this mode:

if(mySuggests[i].toLowerCase().startsWith(suggetsword))

bye bye :-)

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka

Ajax Source code to Suggest application with JSP Server side