Ajax Source code to Suggest application with JSP Server side

msi_333 · **Posted:** 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)

Code:

// Ajaxsc.js
 // doSuggest
 /* 
   Writen by Mohamed Sami 
   Developer 
   Information Technology
   mail :msi_333@yahoo.com
   */
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 :msi_333@yahoo.com
   -->
 <!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 :msi_333@yahoo.com
   -->
<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 · **Posted:** Thu Aug 05, 2010 12:15 pm

thanks

msi_333 · **Posted:** Sat Aug 07, 2010 12:35 am

you are welcome .

fei7shi91 · **Posted:** Thu Aug 19, 2010 7:48 am

thanks for you sharing

tanaytandon · **Posted:** 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

Yoshimitzu · **Posted:** 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 :-)

Ajax Source code to Suggest application with JSP Server side

Users browsing similar posts