Ajax Source code to Suggest application with JSP Server side
Tue Aug 07, 2007 12:18 pm
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)
And here is the JSP code :
Finally is the html code for the index page :
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 ,
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:
<!--
Writen by Mohamed Sami
Developer
Information Technology
mail :[email protected]
-->
<!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:
<!--
Writen by Mohamed Sami
Developer
Information Technology
mail :[email protected]
-->
<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 ,
Re: Ajax Source code to Suggest application with JSP Server side
Thu Aug 05, 2010 12:15 pm
thanks
Re: Ajax Source code to Suggest application with JSP Server side
Sat Aug 07, 2010 12:35 am
you are welcome . 
Re: Ajax Source code to Suggest application with JSP Server side
Thu Aug 19, 2010 7:48 am
thanks for you sharing
Re: Ajax Source code to Suggest application with JSP Server side
Wed Dec 29, 2010 9:52 am
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
Something like what happens in Google.
Thanks In Advance,
Tanay Tandon
Re: Ajax Source code to Suggest application with JSP Server side
Tue Jan 17, 2012 3:58 pm
Yes, you can.
you have modify only one row in Page1.jsp, in this mode:
if(mySuggests[i].toLowerCase().startsWith(suggetsword))
bye bye :-)
you have modify only one row in Page1.jsp, in this mode:
if(mySuggests[i].toLowerCase().startsWith(suggetsword))
bye bye :-)
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com
Powered by phpBB © phpBB Group.