AJAX:Using The prototype Javascript library to create an Auto-complete form.
The Prototype library can be downloaded from here
For a quick introduction to prototype have a look at this article
from 24ways.org
Step 1: Create the HTML form.
As you can see the Form is a simple one containing just a Textbox and a button.
We also have an empty div called resultsdiv below that. This will be used to display the returned values.
Step 2:Create Autocomplete.js
The Init function will be called on page load, which will then setup the page such that that
the autocomplete function will be called when a key is pressed within the txtSearch text box.
The HandleEnter function is used to disable the default behavior of HTML forms whereby the forms submit is triggered when you press the enter key.
HandleClick will be used to handle Click events in the results div.
Lets have a look at the autocomplete function
This sets up the url to call as autocomplete.asp, this could also be a php page or any scripting language that you prefer.
We take the value entered in the txtSearch box and setup the parameter string for it.
The target is set to results div.
What the call to Ajax.Updater then does, is simply specify, that whatever is the response text returned
by the call to autocomplete.asp, display the results within the resultsdiv.
Step 3: Create Autocomplete.asp
We have one function ExecuteSQL, which will simply open a connection to the SQL server specified in db_string (change this according to the database you are using) and return the recordset.
For this example we are using the pubs database, which is included in SQL server.
We create a SQL string to retrieve the top 10 values from the authors table.
These are then displayed within a table grid. The call to handleclick will occur when you click on one of the list values.
This will then populate the text box with the value selected.
Now when you click on the search button it will call SearchUser.asp, with the updated values in the Search box.
I'm not covering the specifics of SearchUser as its not really important for this demonstration.
Finally, just for the sake of completion, although you don't really need it
For a quick introduction to prototype have a look at this article
from 24ways.org
Step 1: Create the HTML form.
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="autocomplete.js"></script>
<style type="text/css" media="all">@import "auto.css";</style>
<title>Auto Complete</title>
</head>
<body>
<table>
<tr>
<td class="tableheader">Search</td>
</tr>
<tr>
<td>
<form id="form1" name="form1" action="SearchUser.asp" method="post" onKeyPress="return HandleEnter(event)">
<input maxlength="50" name="txtSearch" id="txtSearch" width="50">
<input id="submit1" type="button" value="Search" name="submit1" >
</form>
</td>
</tr>
<tr>
<td><div id="resultsdiv"></div></td>
</tr>
</table>
</body>
</html>
As you can see the Form is a simple one containing just a Textbox and a button.
We also have an empty div called resultsdiv below that. This will be used to display the returned values.
Step 2:Create Autocomplete.js
Event.observe(window, 'load', init, false);
function init()
{
//$('submit1').style.display = 'none';
Event.observe('txtSearch', 'keyup', autocomplete, false);
}
function autocomplete(){
var url = 'autocomplete.asp';
var pars = 'userid='+escape($F('txtSearch'));
var target = 'resultsdiv';
var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
}
function HandleEnter(event)
{
if(window.event)
key = window.event.keyCode; //IE
else
key = event.which; //firefox
if(key==13)
{
return false;
}
else
{
return true;
}
}
function HandleClick(name)
{
t=document.getElementById('txtSearch');
t.value=name;
}
The Init function will be called on page load, which will then setup the page such that that
the autocomplete function will be called when a key is pressed within the txtSearch text box.
The HandleEnter function is used to disable the default behavior of HTML forms whereby the forms submit is triggered when you press the enter key.
HandleClick will be used to handle Click events in the results div.
Lets have a look at the autocomplete function
function autocomplete(){
var url = 'autocomplete.asp';
var pars = 'userid='+escape($F('txtSearch'));
var target = 'resultsdiv';
var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
}
This sets up the url to call as autocomplete.asp, this could also be a php page or any scripting language that you prefer.
We take the value entered in the txtSearch box and setup the parameter string for it.
The target is set to results div.
What the call to Ajax.Updater then does, is simply specify, that whatever is the response text returned
by the call to autocomplete.asp, display the results within the resultsdiv.
Step 3: Create Autocomplete.asp
<%
function ExecuteSQL(sql)
dim db_string
db_String ="Provider=SQLOLEDB.1;" & _
"Persist Security Info=True;" & _
"Password=sa;" & _
"User ID=sa;" & _
"Initial Catalog=pubs;" & _
"Network Library=DBMSSOCN;" & _
"Data Source=localhost;"
dim rs
Set rs = Server.CreateObject("ADODB.Recordset")
rs.CacheSize = 999
rs.Open sql, db_String
Set ExecuteSQL = rs
end function
%>
<table width=100% cellSpacing=0 cellPadding=0 >
<%
userid=Request("userid")
'Response.Write("Userid=" & userid)
strSQL="SELECT top 10 [au_lname] FROM [authors] where au_lname like '" & userid & "%' ORDER BY au_lname"
'Response.Write(strSQL)
'Response.End
set rs=ExecuteSQL(strSQL)
do while not rs.EOF
LName=rs("au_lname")
Response.Write("<TR ><TD class='ac1'><a class='ac' href=# onClick=HandleClick('"& LName &"')>" & LName & "</TD></TR>")
rs.MoveNext
loop
%>
</table>
We have one function ExecuteSQL, which will simply open a connection to the SQL server specified in db_string (change this according to the database you are using) and return the recordset.
For this example we are using the pubs database, which is included in SQL server.
We create a SQL string to retrieve the top 10 values from the authors table.
These are then displayed within a table grid. The call to handleclick will occur when you click on one of the list values.
This will then populate the text box with the value selected.
Now when you click on the search button it will call SearchUser.asp, with the updated values in the Search box.
I'm not covering the specifics of SearchUser as its not really important for this demonstration.
Finally, just for the sake of completion, although you don't really need it
* {
margin:0;
padding:0;
}
body {
background:#f5f4d6 no-repeat top left;
background-attachment:fixed;
padding:10px 10px 10 0px;
margin:10;
text-align: center
}
p {
margin:12px 0;
}
#resultsdiv {
background:transparent;
border-style: solid;
border-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-color: black;
margin-left: 2%;
margin-right: 2%;
}
table
{
border-style:solid;
border-width:0px;
border-color:black;
padding:0;
background-color: transparent;
margin-top: 10px;
margin-right:auto;
margin-left:auto;
}
tr
{
background-color: #FFFFFF
}
td
{
border-width:0px;
background-color: #FFFFFF
}
.tabletext {
color: #FF0000;
background:#ffffff;
border-style: solid;
border-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-color: black;
}
.tableheader {
color: #000000;
padding:5;
background:palegoldenrod;
border-width: 2px 2px 2px 2px;
border-style: solid;
border-color: #ffffff #C5CCC5 #C5CCC5 #ffffff;
font-weight: normal;
font-family: Arial, serif;
font-variant: small-caps;
text-align:center;
}
.tablenormal
{
color: black;
padding:6;
background:white;
border-style: solid;
border-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-color: black;
}
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 200px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 40px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
div.box
{
border: solid; border-width: thin;
width: 100%;
}
div.color
{
background: rgb(204,204,255);
padding: 0.5em;
border: none;
min-height: 50em;
display: table-cell;
vertical-align: middle;
height:200px;
}
div.mod
{
padding-left: 0.2em;
border-left: solid;
border-right: none;
border-top: none;
border-bottom: solid;
border-left-width: 3px;
border-bottom-width: 1px;
border-color: blue;
}
input.input-box
{
color: black;
background: #feb;
border: #26a solid 1px
}
input.submit-button
{
color: #000;
background: #fb0;
border: 2px #9cf outset
}
a.ac
{
color:#000000;
text-decoration:none;
font-size:.8em;
}
td.ac1:hover
{
background:#0000DD;
}
Labels: AJAX
posted by r at 9:25 PM
0 Comments:
Post a Comment
<< Home