Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    AJax autosuggest

    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>

  • #2
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    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?
    Chuck Norris counted to infinity.
    Twice.

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by Misguided; 07-17-2009 at 08:33 AM.

  • #4
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    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.
    Chuck Norris counted to infinity.
    Twice.

  • #5
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •