AJax autosuggest

Misguided · 07-09-2009, 03:35 PM

Hi I am able to pass a html to a div object , but i am not able to iterate through the reslus (as done in google suggest)

i have posted my code here.Please guide

<HTML>
<HEAD>
<TITLE>DISPLAY</TITLE>
</HEAD>
<BODY>
<script>
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="AjaxSuggest.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";
}

}
</script>

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

<div id = "theResults" size="50" style = "width:22em;border:1px black solid;padding-left:2px;padding-right:2px; visibility: hidden;background: blue">
</div>
<INPUT type="text" size="50" id="text2" value="XYZ" />

</BODY>
</HTML>

Arnaud · 07-13-2009, 11:09 AM

Hi,

First, please post your code within code tags. It helps.
2nd, you don't really explain what works and what does not...
3rd, we are missing the whole REQUEST code.

We have your JS code, the HTML code with the DIV and input, but where is the request itself? What are you using? PHP?

Misguided · 07-17-2009, 07:30 AM

Hi I am posting my code. I have basically two files , one is the index page (jsp file) and the other request file called ajax suggest. i am displaying both below.

The first one is

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"%>
<%@ page import="java.io.*"%>
<%@ page import="java.sql.*"%>
<%@ page import="java.util.*"%>
<%@ page import="java.lang.*"%>
<TITLE>AjaxSuggest.jsp</TITLE>
</HEAD>
<BODY>
<%

try{
  java.sql.Connection  con = null;
  String userName = "DBNAME";
  String password = "DBNAME"; 
  String getConnectionUrl = "jdbc:microsoft:sqlserver://xxx.xxx.xx.xxx:1433;databaseName=DBNAME;selectMethod=DBNAME";
  Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver"); 
  con = java.sql.DriverManager.getConnection(getConnectionUrl,userName,password);
  if(con!=null) {
  System.out.println("Connection Successful!");
  }else{ 
	  System.out.println("Failure!!!");
  }

  String suggetsword=request.getParameter("suggestword").toLowerCase();
  System.out.println("suggetsword   >>>>>>>"+suggetsword);
  String query1 = "SELECT top 10 A,B FROM TABLE where A like '"+suggetsword+"%'" ;
  String query2 = "SELECT count(*) FROM TABLE where A like '"+suggetsword+"%'" ;
  System.out.println("query1   >>>>>>>"+query1);
  System.out.println("query2   >>>>>>>"+query2);
 int suggetswordLength = suggetsword.length();

 Statement stmt = con.createStatement();
 ResultSet rs = stmt.executeQuery(query1);
 Statement stmt1 = con.createStatement();
 ResultSet rs1 = stmt1.executeQuery(query2);
          rs1.next();
          int Count = rs1.getInt(1);
		  if (Count >10) {Count = 10;}
 int k = 0;
 String[] mySuggests = new String[Count];
 while (rs.next()) {
            String s = rs.getString(1);
			mySuggests[k]= s;
			k++;
		    }

  out.println("<table id='my_table' width='100%' border='0' cellpadding='0' cellspacing='0' bgcolor='rgb(0,255,0)'>");

   for(int i=0;i<mySuggests.length;i++)
   {
	  if(mySuggests[i].toLowerCase().startsWith((suggetsword.substring(0,suggetswordLength))))
      {
	       out.print("<tr onMouseOver=\"kjh(this)\"><td>"+mySuggests[i]+"</td></tr>");
       
        }
   }
    out.println("</table>");
}catch (Exception e){
      e.printStackTrace();
    }
%>

</BODY>
</HTML>

The second one is

Code:

<HTML>
<HEAD>
<TITLE>DISPLAY</TITLE>
</HEAD>
<BODY>
<script>
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="AjaxSuggest.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";
    }
    
}

</script>

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


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

</BODY>
</HTML>

The results that come in from my request page are being put in the div tag in my display page.
The problem is i am not able to select any on the values of the suggested results. I am not sure where do i put the javascript to implement the same?

Arnaud · 07-17-2009, 08:52 AM

Sorry I won't be of much help on that one. Never done DB queries in JS... I use PHP for my AJAX requests because I feel it much easier... But I am sure someone will be able to help.

A1ien51 · 07-17-2009, 04:05 PM

Why are you reinventing the wheel, use an autocomplete script out there that is already written.

If you want to make the things selectable, you need to add onclick handlers to the results and populate the textbox.

Eric