Code Bank
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
 
User Name:
Password:
Remember me
Go Back   ASP Free Forums > Programming > Code Bank
Reload this Page

Classic ASP/AJAX - Auto Suggest Form

Discuss Auto Suggest Form in the Code Bank forum on ASP Free.
Auto Suggest Form Code Bank forum containing sample code and scripts to help solve common problems. Take a look and use the code to assist in your projects.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread ASP Free Forums Sponsor:
  #1  
Old November 20th, 2007, 05:15 PM
alexk13's Avatar
alexk13 alexk13 is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jul 2005
Location: Sydney, Australia
Posts: 212 alexk13 User rank is Second Lieutenant (5000 - 10000 Reputation Level)alexk13 User rank is Second Lieutenant (5000 - 10000 Reputation Level)alexk13 User rank is Second Lieutenant (5000 - 10000 Reputation Level)alexk13 User rank is Second Lieutenant (5000 - 10000 Reputation Level)alexk13 User rank is Second Lieutenant (5000 - 10000 Reputation Level)alexk13 User rank is Second Lieutenant (5000 - 10000 Reputation Level)alexk13 User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 1 Week 17 h 30 m 8 sec
Reputation Power: 88
Classic ASP/AJAX - Auto Suggest Form
Hi Guys

I just posted this as a reply to this query , and thought I would share it here also

OK, here we go:

This is the main page, with a small form, and includes the javascript (further down this post) that talks to the ASP script on the server (even further down this post) to get the suggestions
ASP Code:
Original - ASP Code 
  1. <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
  2. <html>
  3. <head>
  4. <script src="clienthint.js"></script> 
  5. </head>
  6. <body>
  7.  
  8. <form> 
  9. Enter Word:
  10. <input type="text" id="txt1"
  11. onkeyup="showHint(this.value)">
  12. </form>
  13.  
  14. <p>Suggestions: <span id="txtHint"></span></p> 
  15.  
  16. </body>
  17. </html>


This is the javascript:
JavaScript Code:
Original - JavaScript Code 
  1. var xmlHttp
  2.  
  3. function showHint(str)
  4. {
  5. if (str.length==0)
  6.   { 
  7.   document.getElementById("txtHint").innerHTML="";
  8.   return;
  9.   }
  10. xmlHttp=GetXmlHttpObject()
  11. if (xmlHttp==null)
  12.   {
  13.   alert ("Your browser does not support AJAX!");
  14.   return;
  15.   } 
  16. var url="gethint.asp";
  17. url=url+"?q="+str;
  18. url=url+"&sid="+Math.random();
  19. xmlHttp.onreadystatechange=stateChanged;
  20. xmlHttp.open("GET",url,true);
  21. xmlHttp.send(null);
  22. } 
  23.  
  24. function stateChanged() 
  25. { 
  26. if (xmlHttp.readyState==4)
  27. { 
  28. document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
  29. }
  30. }
  31.  
  32. function GetXmlHttpObject()
  33. {
  34. var xmlHttp=null;
  35. try
  36.   {
  37.   // Firefox, Opera 8.0+, Safari
  38.   xmlHttp=new XMLHttpRequest();
  39.   }
  40. catch (e)
  41.   {
  42.   // Internet Explorer
  43.   try
  44.     {
  45.     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  46.     }
  47.   catch (e)
  48.     {
  49.     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  50.     }
  51.   }
  52. return xmlHttp;
  53. }

and this is the ASP script on the server:
ASP Code:
Original - ASP Code 
  1. <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
  2. <%
  3. response.expires=-1
  4. Dim rsWords
  5. Dim rsWords_numRows
  6. Dim q
  7. Dim hint
  8. q=ucase(request.querystring("q"))
  9. hint=""
  10. Set rsWords = Server.CreateObject("ADODB.Recordset")
  11. rsWords.ActiveConnection = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("db_hint_words.mdb")
  12. rsWords.Source = "SELECT *  FROM TBL_WORDS  WHERE (word LIKE'" + q + "%') ORDER BY WORD"
  13. rsWords.CursorType = 2
  14. rsWords.CursorLocation = 2
  15. rsWords.LockType = 3
  16. rsWords.Open()
  17. rsWords_numRows = 0
  18.  
  19. If Not rsWords.EOF Then
  20.     Do While Not rsWords.EOF
  21.         If trim(hint) = "" Then
  22.             hint = rsWords("word")
  23.         Else
  24.             hint = hint & " , " & rsWords("word")
  25.         End If
  26.         rsWords.MoveNext()
  27.     Loop
  28. End If
  29. if trim(hint)="" then 
  30.   response.write("no suggestion")
  31. else
  32.   response.write(hint)
  33. end if
  34.  
  35. rsWords.Close()
  36. Set rsWords = Nothing
  37. %>

This one talks to the access database to get any words that start with whatever is the form field - and this is done each time the content of that field change (each and every keystroke)

I have attached a ZIP file of this code with an Access DB, containing a list of Railway Station names in Sydney, Australia (300+ entries, so a good sample of the code can be run ).

If you would like to see this in action, you can view it on my development server at http://dev.unimaetrix.com/hint/clienthint.asp

The layout of the page is very simple as it is ony a sample of the scripts in action.

Let me know if you need any further assistance , or if you find any errors in my code.
Attached Files
File Type: zip gethint.zip (20.9 KB, 305 views)
__________________
Alex - Lucky Number 13

Did I do something that helped you? - please click the scales and help my rep
Reply With Quote
  #2  
Old November 29th, 2007, 03:23 PM
alexk13's Avatar
alexk13 alexk13 is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jul 2005
Location: Sydney, Australia
Posts: 212 alexk13 User rank is Second Lieutenant (5000 - 10000 Reputation Level)alexk13 User rank is Second Lieutenant (5000 - 10000 Reputation Level)alexk13 User rank is Second Lieutenant (5000 - 10000 Reputation Level)alexk13 User rank is Second Lieutenant (5000 - 10000 Reputation Level)alexk13 User rank is Second Lieutenant (5000 - 10000 Reputation Level)alexk13 User rank is Second Lieutenant (5000 - 10000 Reputation Level)alexk13 User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 1 Week 17 h 30 m 8 sec
Reputation Power: 88
In the thread mentioned in the above post, there was a query about making the suggestions clickable, so here is some more code for that purpose:

Clickable suggestion that populate the text box
I haven't got the autosubmit to work yet tho

ASP Code:
Original - ASP Code 
  1. <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
  2. <html>
  3. <head>
  4. <script src="clienthint.js"></script> 
  5. </head>
  6. <body>
  7. <%
  8. 'this displays the value of the textbox after the form is submitted
  9. If trim(Request("txt1")) <> "" Then
  10.     Response.Write "You entered:"
  11.     Response.Write "<b>" & Request("txt1") & "</b><br /><br />"
  12. End If
  13. %>
  14. <form name="form1" action="clienthint.asp" method="post">
  15. Enter Word:
  16. <input type="text" name="txt1" id="txt1" onKeyUp="showHint(this.value,'txt1','form1',true)">
  17. <input type="submit" name="submit" value="submit">
  18. </form>
  19. <p>Suggestions: <span id="txtHint"></span></p> 
  20. </body>
  21. </html>


JavaScript Code:
Original - JavaScript Code 
  1. var xmlHttp
  2.  
  3. function showHint(str, box, thisForm, autoSubmit)
  4. {
  5. if (str.length==0)
  6.   { 
  7.   document.getElementById("txtHint").innerHTML="";
  8.   return;
  9.   }
  10. xmlHttp=GetXmlHttpObject()
  11. if (xmlHttp==null)
  12.   {
  13.   alert ("Your browser does not support AJAX!");
  14.   return;
  15.   } 
  16. var url="gethint.asp";
  17. url=url+"?q="+str;
  18. url=url+"&b="+box;
  19. url=url+"&f="+thisForm;
  20. url=url+"&a="+autoSubmit;
  21. url=url+"&sid="+Math.random();
  22. xmlHttp.onreadystatechange=stateChanged;
  23. xmlHttp.open("GET",url,true);
  24. xmlHttp.send(null);
  25. } 
  26.  
  27. function stateChanged() 
  28. { 
  29. if (xmlHttp.readyState==4)
  30. { 
  31. document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
  32. }
  33. }
  34.  
  35. function GetXmlHttpObject()
  36. {
  37. var xmlHttp=null;
  38. try
  39.   {
  40.   // Firefox, Opera 8.0+, Safari
  41.   xmlHttp=new XMLHttpRequest();
  42.   }
  43. catch (e)
  44.   {
  45.   // Internet Explorer
  46.   try
  47.     {
  48.     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  49.     }
  50.   catch (e)
  51.     {
  52.     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  53.     }
  54.   }
  55. return xmlHttp;
  56. }
  57.  
  58. //this function allows for Clickable suggestions
  59. function setTextBox(thisText,thisBox,thisForm,autoSubmit){
  60.     document.getElementById(thisBox).value = thisText
  61.     //this autoSubmits the form after a suggestion is clicked - it is not working :(
  62.     //if(autoSubmit=='true'){
  63.     //  alert(thisForm);
  64.     //  document.getElementById(thisForm).submit();
  65.     //}
  66. }


ASP Code:
Original - ASP Code 
  1. <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
  2. <%
  3. response.expires=-1
  4. Dim rsWords
  5. Dim rsWords_numRows
  6. Dim q
  7. Dim b
  8. Dim hint
  9. q=ucase(request.querystring("q"))
  10. b=(request.querystring("b"))
  11. f=(request.querystring("f"))
  12. a=(request.querystring("a"))
  13. hint=""
  14. Set rsWords = Server.CreateObject("ADODB.Recordset")
  15. rsWords.ActiveConnection = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("db_hint_words.mdb")
  16. rsWords.Source = "SELECT *  FROM TBL_WORDS  WHERE (word LIKE'" + q + "%') ORDER BY WORD"
  17. rsWords.CursorType = 2
  18. rsWords.CursorLocation = 2
  19. rsWords.LockType = 3
  20. rsWords.Open()
  21. rsWords_numRows = 0
  22.  
  23. If Not rsWords.EOF Then
  24.     Do While<