Autocomplete sample using Jquery and CXP

Xbase++ 2.0 Build 554 or later
Post Reply
Message
Author
User avatar
rdonnay
Site Admin
Posts: 4729
Joined: Wed Jan 27, 2010 6:58 pm
Location: Boise, Idaho USA
Contact:
Contact rdonnay

Autocomplete sample using Jquery and CXP

#1 Post by rdonnay »

http://donnay-software.com/ds/autocomplete.htm

This little app uses the Jquery Widget: AutoComplete

When you click on the above URL it will load the following in your web browser:

Code: Select all

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="./Jquery/jquery-ui-1.11.4.custom/jquery-ui.css">
  <script src="./Jquery/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
  <script src="./Jquery/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
</head>
<body>

<label for="autocomplete">Choose a Performer: </label>
<input id="autocomplete">

<script>
$( "#autocomplete" ).autocomplete({
  source: "./autocomplete.cxp"
});
</script>

</body>
</html>
When you start typing in the "Choose a Performer" box it will call autocomplete.cxp and pass it the value in the input box.
autocomplete.cxp returns a JSon array with only the performers that match the value in the input box. The data could easily come from a database rather than an array.

Code: Select all

<!--
/// <summary>
/// Returning a JSON data stream
/// </summary>
-->
<%

cTerm := Upper(Pvalue(1))

aNames := { ;
   'Annie Hall', ;
   'Arlo Guthrie', ;
   'Bette Midler', ;
   'Bob Dylan', ;
   'Bobbie Gentry', ;
   'Buddy Holly', ;
   'Canned Heat', ;
   'Carol Elliot', ;
   'Carole King', ;
   'Caroline Aikin', ;
   'Cat Stevens', ;
   'Catie Curtis', ;
   'Cheryl Wheeler', ;
   'Chuck Prophet', ;
   'Chuck Pyle', ;
   'Crosby, Stills, Nash', ;
   'Danny Kaye', ;
   'Dar Williams', ;
   'Dr Hook', ;
   'Eliza Gilkyson', ;
   'Elton John', ;
   'Elvis Presley', ;
   'Freddie Mercury', ;
   'Gail Davies', ;
   'Glenn Miller', ;
   'Gordon Rowland', ;
   'Greg Brown', ;
   'Harry McClintock', ;
   'Itzhak Perlman', ;
   'James Taylor', ;
   'Jan Stanfield', ;
   'Jefferson Airplane', ;
   'Jim Croce', ;
   'Jimi Hendrix', ;
   'Jimmy Dean', ;
   'John Denver', ;
   'Joni Mitchell', ;
   'Journey', ;
   'Kevin Welch', ;
   'Krystian Zimermann', ;
   'Led Zeppelin', ;
   'Lyle Lovett', ;
   'Lynn Miles', ;
   'Madeleine Peyroux', ;
   'Michael Jackson', ;
   'Michael Lille', ;
   'Mumbo Gumbo', ;
   'Norah Jones', ;
   'Ray Charles', ;
   'Richard Pryor', ;
   'Richard Shindell', ;
   'Richie Havens', ;
   'Robin Williams', ;
   'Roy Orbison', ;
   'Sam Cooke', ;
   'Slobberbone', ;
   'Steppenwolf', ;
   'Susan Werner', ;
   'Ten Years After', ;
   'The Beatles', ;
   'The Doors', ;
   'The Eagles', ;
   'The Flatlanders', ;
   'The Moody Blues', ;
   'Tim Bays', ;
   'Toby Keith', ;
   'Tom Paxton', ;
   'Tom Petty', ;
   'Tom Prasada-Rao', ;
   'Van Morrison', ;
   'Vance Gilbert', ;
   'Vic Chestnutt', ;
   'Willie Nelson', ;
   'Yo-yo Ma', ;
   'Yundi Li'}

aNames2 := {}
FOR i := 1 TO Len(aNames)
  IF Left(Upper(aNames[i]),Len(cTerm)) == cTerm
    AAdd(aNames2,aNames[i])
  ENDIF
NEXT

cData := Var2Json( aNames2 )

 ::HttpResponse:ContentType := "text/json;charset=iso-8859-1"
 OutputDebugStringA( Var2Char(cData ) )

 ::HttpResponse:Reset()
 ::HttpResponse:Write( cData )
%>
The eXpress train is coming - and it has more cars.
Top
Zdeno Bielik
Posts: 147
Joined: Thu Jan 28, 2010 9:24 am
Location: Nitra, Slovakia
Contact:
Contact Zdeno Bielik

Re: Autocomplete sample using Jquery and CXP

#2 Post by Zdeno Bielik »

Hi Roger,

excellent work!
Please, if is it possible, can you do example for CxpHttpServer too?

Zdeno
Top
User avatar
rdonnay
Site Admin
Posts: 4729
Joined: Wed Jan 27, 2010 6:58 pm
Location: Boise, Idaho USA
Contact:
Contact rdonnay

Re: Autocomplete sample using Jquery and CXP

#3 Post by rdonnay »

Please, if is it possible, can you do example for CxpHttpServer too?
I think there is something you don't understand about CxpHttpServer.
It is a CXP server just as IIS and Apache are CXP servers.

This will work with CxpHttpServer, IIS and Apache.
The eXpress train is coming - and it has more cars.
Top
User avatar
rdonnay
Site Admin
Posts: 4729
Joined: Wed Jan 27, 2010 6:58 pm
Location: Boise, Idaho USA
Contact:
Contact rdonnay

Re: Autocomplete sample using Jquery and CXP

#4 Post by rdonnay »

Here is an updated version that acquires data from either an array or a database.

http://donnay-software.com/ds/autocomplete.htm

Autocomplete.Htm

Code: Select all

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="./Jquery/jquery-ui-1.11.4.custom/jquery-ui.css">
  <script src="./Jquery/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
  <script src="./Jquery/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
</head>
<body>

<label for="autocomplete">Choose a Performer: </label>
<input id="autocomplete1">
<label>From Array</label>
<br><br>

<label for="autocomplete">Choose a Performer: </label>
<input id="autocomplete2">
<label>From Database</label>

<script>

$( "#autocomplete1" ).autocomplete({
  source: "./autocomplete.cxp?database=N",
});

$( "#autocomplete2" ).autocomplete({
  source: "./autocomplete.cxp?database=Y",
});

</script>

</body>
</html>
autocomplete.cxp

Code: Select all

<!--
/// <summary>
/// Returning a JSON data stream
/// </summary>
-->
<%

cTerm := Upper(Pvalue(2))
cDatabase := Upper(Pvalue(1))

aNames2 := {}

IF cDatabase='N'
  aNames := { ;
   'Annie Hall', ;
   'Arlo Guthrie', ;
   'Bette Midler', ;
   'Bob Dylan', ;
   'Bobbie Gentry', ;
   'Buddy Holly', ;
   'Canned Heat', ;
   'Carol Elliot', ;
   'Carole King', ;
   'Caroline Aikin', ;
   'Cat Stevens', ;
   'Catie Curtis', ;
   'Cheryl Wheeler', ;
   'Chuck Prophet', ;
   'Chuck Pyle', ;
   'Crosby, Stills, Nash', ;
   'Danny Kaye', ;
   'Dar Williams', ;
   'Dr Hook', ;
   'Eliza Gilkyson', ;
   'Elton John', ;
   'Elvis Presley', ;
   'Freddie Mercury', ;
   'Gail Davies', ;
   'Glenn Miller', ;
   'Gordon Rowland', ;
   'Greg Brown', ;
   'Harry McClintock', ;
   'Itzhak Perlman', ;
   'James Taylor', ;
   'Jan Stanfield', ;
   'Jefferson Airplane', ;
   'Jim Croce', ;
   'Jimi Hendrix', ;
   'Jimmy Dean', ;
   'John Denver', ;
   'Joni Mitchell', ;
   'Journey', ;
   'Kevin Welch', ;
   'Krystian Zimermann', ;
   'Led Zeppelin', ;
   'Lyle Lovett', ;
   'Lynn Miles', ;
   'Madeleine Peyroux', ;
   'Michael Jackson', ;
   'Michael Lille', ;
   'Mumbo Gumbo', ;
   'Norah Jones', ;
   'Ray Charles', ;
   'Richard Pryor', ;
   'Richard Shindell', ;
   'Richie Havens', ;
   'Robin Williams', ;
   'Roy Orbison', ;
   'Sam Cooke', ;
   'Slobberbone', ;
   'Steppenwolf', ;
   'Susan Werner', ;
   'Ten Years After', ;
   'The Beatles', ;
   'The Doors', ;
   'The Eagles', ;
   'The Flatlanders', ;
   'The Moody Blues', ;
   'Tim Bays', ;
   'Toby Keith', ;
   'Tom Paxton', ;
   'Tom Petty', ;
   'Tom Prasada-Rao', ;
   'Van Morrison', ;
   'Vance Gilbert', ;
   'Vic Chestnutt', ;
   'Willie Nelson', ;
   'Yo-yo Ma', ;
   'Yundi Li'}
  FOR i := 1 TO Len(aNames)
    IF Left(Upper(aNames[i]),Len(cTerm)) == cTerm
      AAdd(aNames2,aNames[i])
    ENDIF
  NEXT
ELSE
  cPath := ::physicalPath
  USE (cPath + "Performers") INDEX ( cPath + "Performers") VIA 'FOXCDX'
  Performers->(dbSetScope(1,cTerm))
  Performers->(dbSetScope(2,cTerm))
  Performers->(dbGoTop())
  DO WHILE !Performers->(Eof())
    AAdd(aNames2,Performers->performer)
    Performers->(dbSkip())
  ENDDO
  Performers->(dbCloseArea())
ENDIF

cData := Var2Json( aNames2 )

 ::HttpResponse:ContentType := "text/json;charset=iso-8859-1"
 OutputDebugStringA( Var2Char(cData ) )

 ::HttpResponse:Reset()
 ::HttpResponse:Write( cData )
%>
The eXpress train is coming - and it has more cars.
Top
Post Reply

Return to “Xbase++ 2.0”