Suggest Like Page along with Arrow Buttons used for rendering and selecting recods suggested

• Download AJAX_Suggest.zip - 16.4 KB

Snapshot how suggest page looks or works.

Introduction

As we have seen all applications are being transformed using AJAX now a days, its crucial to have insight in AJAX technologies and practical implementation of AJAX. This is my first try to write an article for Codeproject.
This article is mainly focused on how to manage rendering through the records used for Suggest like web pages using arrow (Up/Down) keys and mouse clicks along with how to fetch data stored in Databases as XML data from another page using AJAX and ASP.

Background

Notes: Some part of code presented may not be directly useful for using this code as it is.
You need to change the code as per your needs. Please alter SQL queries according to your tables or you may write code to select data from some array stored on page to be fetched by an AJAX call.

For this you need AJAX libraries and JQuery include files on your server as it makes life easier to make AJAX calls and to refer form elements using their ID's. Please find information and related files of JQuery on: http://www.visualjquery.com/1.1.2.html

I am writing this article mainly for how to render through records using arrow keys, mouse events. How to change background color on events.

Using the code

This article provides how to create a List of records dynamically on a web page and provide selection option for users to select particular record they want to select for processing. You can see image on top shows the fetched records from AJAX page.

PAGES:
Main Page where you have a form field (mostly text box) where you want to fetch data dynamically for user (like Google suggest). This page will also hold <city w:st="on"><place w:st="on">AJAX and JavaScript code to handle background communication with browser.
Database Page (I have written in ASP but you can have any like PHP, JSP, ASP.NET etc.)

Main Page:
Functionality:
The main page has one input text box where you want user to type some keystrokes and then using <place w:st="on"><city w:st="on">AJAX and DB Page you want to fetch some records which are matching to user's query and present it for user to select one which he is seeking. And then send selected data to some other page (Or maybe Same page depends on your app) you want to process after this.

Then you can select one of these suggestions given by this intelligent page and send the selection for further processing. Now I will start Writing Code:

//HTML CODE ON MAIN PAGE:
<fieldset>
          <ol>
            <li>
              <label for="Highschool">Search Input</label>
              <input type="text" name="Highschool" id="Highschool" tabindex="1" value="" autocomplete="off" /> 
 <div align="center" id="txtHint" style="position:absolute;z-index:1;border-width:thin; border-style:solid; background-color:#DDF8FB; width:220px; font-size:xx-small;">
                <ul id="txtHintList" style="float:none;text-align:left;margin:0px;padding:0px;">
                  <li>$nbsp;</li>
                </ul>
              </div>
            </li>
          </ol>
          </fieldset>

INPUT BOX: See code for input box where user provides query up. See autocomplete="off" which is required for disabling browser feature of remembering what you entered in previous text form fields with the same name. So you will not have any problem due to your saved stuff in history.

Red Code DIV:The red colored code contains a DIV with ID which is really useful while writing AJAX Code is place where the new list of records coming from background page will be shown and presented for user.

HERE COMES <city w:st="on"><place w:st="on">AJAX:

NOTE: I have used Jquery also to minimize size of code which I was writing. JQuery is nothing but a revolutionary set of JavaScript libraries which makes your life easy (helps to create apps which we refer as cool ones!!). You can refer to it on: http://www.visualjquery.com/

NOTE: You need to download JQuery Libraries. I want to explain what JQuery does Quickly as it will help you for new people:

I have used the JavaScript Libraries called JQuery which provides easy way to refer objects or elements within html page using their ID's.If suppose I have element as follows:

<div align="center" id="txtHint" name="txtHint"> 
<cite>I write Codes 
<cite></div> <cite></cite></cite></cite> 

Then I can refer this element as: $("#txtHint") and then .(dot operator) and proper function which I want to like show(),hide() which are written by jquery libraries and easy to use and cool in look and feel. So when I write $("#txtHint").hide(); means when this instruction is executed that element is refered as equal to GetElementByID("txtHint") and made hidden for user. For general info see: http://en.wikipedia.org/wiki/Jquery
Download these libraries for free here: http://www.visualjquery.com/

<city w:st="on"><place w:st="on">AJAX & Jscript Code

<script type="text/javascript" language="javascript">
<!--
function newFunction(highSchoolName)
{
$('#Highschool').attr("value", highSchoolName);
$("#txtHint").hide(); 
}

Initially on pageload don't show the DIV which will hold dynamically created LI elements
It should be visible if user provides some query .

function highlight(varid)
{
document.getElementById(varid).style.backgroundColor="#FFCCCC";
}
$(document).ready(function() { $("#savemanagerhint").hide();
$("#txtHint").hide(); //hide the HSschool name layer
$("#pageUpdates").hide();

(document).ready(function():
function from Jquery provides facility to initialize specific elements on your page. Like you can see $txtHint.hide() function which will hide element with txtHint ID on page load.

var elementcount = -1;
var elemcnt = -1;
var keyval,rectype;
$('#Highschool').keyup(function(e)
{
var code; //variable to save keystroke
if (!e) var e = window.event; //did i get any event
if (e.keyCode) code = e.keyCode; 

Initially elementcount is set to -1. The array of fetched records will look something like as follows. So I cannot assign this variable from 0 or 1 as I want to start it from 0.

<div id="txtHint">
  <ul id="txtHintList">
     <li id="test0">Rogger Mains Highschool</li>
     <li id="test1">Best High School</li>
     <li id="test2">South West High School</li>
     <li id="test3">Texas High School</li>
  </ul>
</div>

How to handle when user presses Enter Key (Key code = 13) Assign key code to var code Routine for check for enter Key pressed, I will just submit the form.

if(code==13) //check for enter key pressed
{
document.form1.submit();
}

Routine for check for UP arrow key pressed up or down arrow key:
1.check for up arrow key pressed

else if(code==38)
{
if(elementcount <= -1) 
// why do i need counter to go below 0, as my created list is finite cant be -ve
{
elementcount = 0; 
// if user presses up arrow even after reaching 1st list place set counter 
to zero
}
else
{
elementcount = elementcount - 1; //if counter is positive and user presses up arrow
}

Now I want to assign selected ID's html content as my inpubox's html contents, set selected stuff as data into inputbox (looks like google suggest). Dynamically according to user's arrow key the input box will contain selected data using arrow keys.

var tempvar = document.getElementById('test'+elementcount).innerHTML;
document.form1.Highschool.value = tempvar;

Now I want to change the background as user must know what he has selected and increase the element ID by one from previous value which will become current one.

document.getElementById('test'+elementcount).style.backgroundColor="#FFCCCC";
var w=elementcount+1;

Now I need to reset my counter if it has become less than 0 or more than possible (available number of LI elements (ID's))

if (w <=elemcnt && w>=0) //check elementid is within range
{
document.getElementById('test'+w).style.backgroundColor="#DDF8FB"; //change its background color
}
}

Routine for check for DOWN arrow key pressed. Same as we did for up arrow key.

else if(code==40) //check for down arrow key pressed
{

Now as user is going down in the created array (List) of elements and my ID's start from 0 to largest LI-ID I will increase the count by 1.

elementcount = elementcount + 1;

But if what user is at last element and still pressing down arrow key I will reduce it by one to come to last element possible in my created dynamic array.

if (elementcount > elemcnt) //current elementid should not be more that available ids
{
elementcount = elementcount-1; // if it is reduce it
}

See down I am collecting current LI element html content into temporary variable, at the same time I will change the background color of this LI element as different so that user can understand what he has selected currently.Also this routine puts that value(Temporary variable's value) in my input box and as you know if user hits enter routine will submit the form and already I have proper value in my input box.

tempvar = document.getElementById('test'+elementcount).innerHTML;
document.form1.Highschool.value = tempvar;
document.getElementById('test'+elementcount).style.backgroundColor="#FFCCCC";
if(elementcount > elemcnt )
{
elementcount = -1;
}
var z=elementcount-1;

I am checking whether element is in within its possible range(0-largest possible ID for created LI)

if (z<=elemcnt && z>=0) {
document.getElementById('test'+z).style.backgroundColor="#DDF8FB"; 
//change its background color
}
}
else
{ 
var thisWord = $('#Highschool').attr("value");
$('#txtHintList').empty(); 

If user provides escape char then reset textbox as empty so that user don't have to mess with back or delete keys to change his query.

if(code == 27 || ($('#Highschool').attr("value")==""))
{
document.getElementById('Highschool').value="";
elementcount = -1;
}

Now user has given query I will perform AJAX call to fetch data from another page as XML data and present it into dynamically created List on my front end page.

$.ajax({type: "GET", url: "dbpage.asp?name="+thisWord, datatype: "xml", success: function(xml) {

Now for each element comming as XML element from the page called by AJAX call we will create LI element with proper ID as explained above starting from 0+test to largest possible count.

$("name", xml).each(function(i){ 
var stuff = $(this).text();
var mydata;
var textboxid = document.getElementById("Highschool");
mydata = textboxid;
var myElement = document.createElement("li");
myElement.id = "test"+i;
var thisid = document.getElementById("test"+i);myElement.innerHTML = mydata;

Now append this created element in txtHintList which is UL tag inside suggest DIV

$('#txtHintList').append(myElement);

We are done with arrow key presses, but what if user uses mouse to select record he/she wants. Below is code to handle that. Change color onmouseover and if user clicks that LI element then put the value inside inputbox and seek for form submit click or enter when we will submit the form. After submission at any time we will hide the created dynamic List.

$("#test"+i).mouseover(function() { this.style.backgroundColor='#FFCCCC'; });
$("#test"+i).mouseout(function() { this.style.backgroundColor=''; });
$("#test"+i).click(function(){
tempvar = $(this).html();
document.form1.Highschool.value = tempvar;
$("#txtHint").hide();
});
 $.LI({onload:"this.style.backgroundColor='green';",onclick:"newFunction('"+hscsname+"');",id:"test"+i,onmouseover:"this.style.backgroundColor='#FFCCCC';",onMouseout:"this.style.backgroundColor='';"},hscsname);
elemcnt = i; //save highest li id in this var
$("#txtHint").show();
});
}});
}
}); //onkeyup ends
}); //main function ends
// written by Vishu Gurav,vishu.gurav@gmail.com
//-->
</script> 

Database Page

Now the page which is called using AJAX is provided down. It's written using asp(vbscript) but I think you can use according to your respective needs like asp.NET, PHP, Python etc.
Data Base Page: dbpage.asp

<a href="mailto:%@LANGUAGE="></a><a href="mailto:%@LANGUAGE="><%@LANGUAGE="VBSCRIPT"%></a>

Collect the variable (query string from user) using request.QueryString as in AJAX call I have specified Method as GET and proceed if number of characters comming from user are greater than 2 as I dont want to stress my server for merely one character.

<% varHighSchool = request.QueryString("name") %>
<% If len(varHighSchool) > 2 Then

Create Recordset using SQL to fetch data from databases to send to main page.

Dim Suggest_Array
Dim Suggest_Array_numRows
Set Suggest_Array = Server.CreateObject("ADODB.Recordset")
Suggest_Array.ActiveConnection = MM_intranet_STRING
Suggest_Array.Source = "SELECT FullSchoolName FROM dbo.SchoolSDetails WHERE Name LIKE '%"&varHighSchool&"%'" 
Suggest_Array.CursorType = 0
Suggest_Array.CursorLocation = 2
Suggest_Array.LockType = 1
Suggest_Array.Open()
Suggest_Array_numRows = 0 %> 

Now I need repeat region to go thorugh all the selected database rows using above query and create XML file to send to main page.

<% Dim Repeat1__numRows
Dim Repeat1__index
Repeat1__numRows = -1
Repeat1__index = 0
Suggest_Array_numRows = Suggest_Array_numRows + Repeat1__numRows 
Response.Buffer = True 'stream output to client as it is created
Response.ContentType = "text/xml" %>

<?xml version="1.0" encoding="UTF-8"?>
<startxml>
<% While ((Repeat1__numRows <> 0) AND (NOT Suggest_Array.EOF)) %>
<name><%=(Suggest_Array.Fields.Item("FullName").Value)%></name>

Above is the xml data we are sending to previous page as background communication with browser.

<% Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
Suggest_Array.MoveNext()
Wend %> 

<% Suggest_Array.Close()
Set Suggest_Array = Nothing %>
</startxml>
<% End If %> 

Database page code ends here. It can be written using other scripting languages (php, python, jsp) and also rather than fetching data from Database you can have search withing text file or maybe array.

Browser Compatibility: IE and Firefox

Points of Interest

The main pain while writing this code was to handle users arrow-button presses. As each of up and down arrow key press was important for this to maintain the element ID's for dynamically created LI elements it was really crucial to make it zero when user comes to 1st record then add one or subtract one to select current user focused LI's ID. All in all it was fun to write this code. Also many times I was afraid that I am providing to many requests to server which deals with querying database frequently which was capable to cause troubles for DB, Server and me too.

History

Please let me know about this article if you have any comments or questions.

Thanks,
Vishu