Ajax Seeker / LiveSearch

[Greg Neid]

After some work, I have found what I was looking for. What we in dBASE have called a seeker, the ajax community calls "LiveSearch". Google on Livesearch and many examples of a simple ajax seeker some up. The one from W3Schools is best and simplest example I found, and it works on all browsers. I test with Opera, Firefox, Safari and IE, as well as Blackberry, Palm and iPhone.

Good Luck.

[Claus Mygind]

Greg,

The only thing you need in a standard ajax call to differentiate between IE
and the other browsers is loading the XMLHttpRequest;

if (window.ActiveXObject)
{
tempHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest) {
tempHttp = new XMLHttpRequest();
}

Other than that what you are looking to do is just standard stuff that is
activated every time the user types in a character in the input field like
firing an event such as "onkeydown", "onkeypress" or "onkeyup"

In your server side app just use the "limit" method to limit the response to
5 or less records. Of course if you have more than 5 matching records at
the maximum length of the input field you will never see the remaining
records.

Then just display you results in hidden/visible <div> </div> section with an
absolute position (centered on the screen).

Claus

Post by Greg Neid
After some work, I have found what I was looking for. What we in dBASE
have called a seeker, the ajax community calls "LiveSearch". Google on
Livesearch and many examples of a simple ajax seeker some up. The one
from W3Schools is best and simplest example I found, and it works on all
browsers. I test with Opera, Firefox, Safari and IE, as well as
Blackberry, Palm and iPhone.
Good Luck.

[Greg Neid]

Hi Claus:

Here is the javascript. Very simple. Gt it from the w3C examples. Some small modifications only for me.

var xmlHttp

function showResult(data,searchtype,sessionid,nextef_tabno,nextaction,nextsubaction)
{
if (data.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return
}

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}

var url="/bin/ltrake.dbw?action=livesearch"
url=url+"&subaction="+searchtype
url=url+"&datastring="+data
url=url+"&sessionid="+sessionid
url=url+"&nextef_xtabno="+nextef_tabno
url=url+"&nextaction="+nextaction
url=url+"&nextsubaction="+nextsubaction
url=url+"&random="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
//alert(xmlHttp.responseText);
document.getElementById("livesearch").innerHTML=xmlHttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;

Post by Claus Mygind
Greg,
The only thing you need in a standard ajax call to differentiate between IE
and the other browsers is loading the XMLHttpRequest;
if (window.ActiveXObject)
{
tempHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest) {
tempHttp = new XMLHttpRequest();
}
Other than that what you are looking to do is just standard stuff that is
activated every time the user types in a character in the input field like
firing an event such as "onkeydown", "onkeypress" or "onkeyup"
In your server side app just use the "limit" method to limit the response to
5 or less records. Of course if you have more than 5 matching records at
the maximum length of the input field you will never see the remaining
records.
Then just display you results in hidden/visible <div> </div> section with an
absolute position (centered on the screen).
Claus

[Greg Neid]

Hi Claus,

I love MySQL.
cQ = [SELECT SQL_CALC_FOUND_ROWS cs.CustName,cs.Address1,cs.City,cs.CustomerID,cs.ShipToID ]

cQ += [FROM customer_shipto AS cs WHERE ]
cQ += [CUSTNAME LIKE '%]+datastring+[%' ]
cQ += [ORDER BY custname ]
cQ += [LIMIT 12]

SQL_CALC_FOUND_ROWS causes mySQL to give you back the total rows found, even though it was limited to 12.

It required a second query, q.sql = [SELECT found_rows() AS nRows]

nRows contains the total rows found.

I never get large numbers of rows in web apps. The BDE is very stables with small rowsets.

Maybe you knew this already!

Greg Neid

Post by Claus Mygind
Greg,
In your server side app just use the "limit" method to limit the response to
5 or less records. Of course if you have more than 5 matching records at
the maximum length of the input field you will never see the remaining
records.
Then just display you results in hidden/visible <div> </div> section with an
absolute position (centered on the screen).
Claus

Post by Greg Neid
After some work, I have found what I was looking for. What we in dBASE
have called a seeker, the ajax community calls "LiveSearch". Google on
Livesearch and many examples of a simple ajax seeker some up. The one
from W3Schools is best and simplest example I found, and it works on all
browsers. I test with Opera, Firefox, Safari and IE, as well as
Blackberry, Palm and iPhone.
Good Luck.

[Claus Mygind]

Greg:

Glad to see you got it to work the way you liked it.

Good to see you limited your response to 12.

What you have there is a nice basic ajax call and as long as it works for
you great.

Your example of creating the xmlHttp object in testing if you have an IE,
newer type IE or some WC3 compliant browser is ok, but could be streamlined
(hence miliseconds faster) using the example I gave. But either will work
just fine.

To steamline code just replace your line of code
"xmlHttp=GetXmlHttpObject()" with the steamlined example below and you
should be able to remove that extra "function GetXmlHttpObject()".


STREAMLINED EXAMPLE
if (window.ActiveXObject)
{
tempHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest) {
tempHttp = new XMLHttpRequest();
}



YOUR EXAMPLE:

xmlHttp=GetXmlHttpObject()


function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;

Post by Greg Neid
Hi Claus,
I love MySQL.
cQ = [SELECT SQL_CALC_FOUND_ROWS
cs.CustName,cs.Address1,cs.City,cs.CustomerID,cs.ShipToID ]
cQ += [FROM customer_shipto AS cs WHERE ]
cQ += [CUSTNAME LIKE '%]+datastring+[%' ]
cQ += [ORDER BY custname ]
cQ += [LIMIT 12]
SQL_CALC_FOUND_ROWS causes mySQL to give you back the total rows found,
even though it was limited to 12.
It required a second query, q.sql = [SELECT found_rows() AS nRows]
nRows contains the total rows found.
I never get large numbers of rows in web apps. The BDE is very stables with small rowsets.
Maybe you knew this already!
Greg Neid

Post by Claus Mygind
Greg,
In your server side app just use the "limit" method to limit the response to
5 or less records. Of course if you have more than 5 matching records at
the maximum length of the input field you will never see the remaining
records.
Then just display you results in hidden/visible <div> </div> section with an
absolute position (centered on the screen).
Claus

Post by Greg Neid
After some work, I have found what I was looking for. What we in dBASE
have called a seeker, the ajax community calls "LiveSearch". Google on
Livesearch and many examples of a simple ajax seeker some up. The one
from W3Schools is best and simplest example I found, and it works on all
browsers. I test with Opera, Firefox, Safari and IE, as well as
Blackberry, Palm and iPhone.
Good Luck.

[Greg Neid]

Hi Claus,

Excellent point. There is no need for a try/catch if you determine the issue before hand!

Greg Neid

Post by Claus Mygind
Glad to see you got it to work the way you liked it.
Good to see you limited your response to 12.
What you have there is a nice basic ajax call and as long as it works for
you great.
Your example of creating the xmlHttp object in testing if you have an IE,
newer type IE or some WC3 compliant browser is ok, but could be streamlined
(hence miliseconds faster) using the example I gave. But either will work
just fine.
To steamline code just replace your line of code
"xmlHttp=GetXmlHttpObject()" with the steamlined example below and you
should be able to remove that extra "function GetXmlHttpObject()".
STREAMLINED EXAMPLE
if (window.ActiveXObject)
{
tempHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest) {
tempHttp = new XMLHttpRequest();
}
xmlHttp=GetXmlHttpObject()
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;

Post by Greg Neid
Hi Claus,
I love MySQL.
cQ = [SELECT SQL_CALC_FOUND_ROWS
cs.CustName,cs.Address1,cs.City,cs.CustomerID,cs.ShipToID ]
cQ += [FROM customer_shipto AS cs WHERE ]
cQ += [CUSTNAME LIKE '%]+datastring+[%' ]
cQ += [ORDER BY custname ]
cQ += [LIMIT 12]
SQL_CALC_FOUND_ROWS causes mySQL to give you back the total rows found,
even though it was limited to 12.
It required a second query, q.sql = [SELECT found_rows() AS nRows]
nRows contains the total rows found.
I never get large numbers of rows in web apps. The BDE is very stables
with small rowsets.
Maybe you knew this already!
Greg Neid

Post by Claus Mygind
Greg,
In your server side app just use the "limit" method to limit the response to
5 or less records. Of course if you have more than 5 matching records at
the maximum length of the input field you will never see the remaining
records.
Then just display you results in hidden/visible <div> </div> section with an
absolute position (centered on the screen).
Claus

Post by Greg Neid
After some work, I have found what I was looking for. What we in dBASE
have called a seeker, the ajax community calls "LiveSearch". Google on
Livesearch and many examples of a simple ajax seeker some up. The one
from W3Schools is best and simplest example I found, and it works on all
browsers. I test with Opera, Firefox, Safari and IE, as well as
Blackberry, Palm and iPhone.
Good Luck.