[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
xampp182
/
htdocs
/
simpeg
/
zapatec
/
zpautocomplete
/
zpautocomplete
/
demo
/
[
Home
]
File: serverside.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <meta name="description" content=" Start to enter city name into one of the fields below. When first 3 characters are entered, AutoComplete widget queries the server and returns several airports. You can choose one of the airports from the list using mouse or keyboard. Use Up and Down arrows on the keyboard to move cursor, Enter to choose value. The same AutoComplete object can be used for several fields in one or different forms on the HTML page. "> <meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools"> <title>Zapatec AutoComplete Widget - Example of Client-Server Communications</title> <!-- Common JS files --> <script type='text/javascript' src='../../utils/zapatec.js'></script> <!-- Custom includes --> <script type="text/javascript" src="../src/zpautocomplete.js"></script> <!-- ALL demos need these css --> <link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css"> <link href="../../website/css/template.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { width: 778px; } </style> <link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico"> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Example of Client-Server Communications</div> This is a basic example showing how to use AutoComplete widget to get possible values of the form field from the server depending on user input. <div class='zpCalDemoText'> <ul> <li>Start to enter city name into one of the fields below.</li> <li>When first 3 characters are entered, AutoComplete widget queries the server and returns several airports.</li> <li>You can choose one of the airports from the list using mouse or keyboard.</li> <li>Use Up and Down arrows on the keyboard to move cursor, Enter to choose value.</li> <li>The same AutoComplete object can be used for several fields in one or different forms on the HTML page.</li> </ul> </div> <div class='mainCol'> <form> <table style="width: 100%"> <tr> <td style="width: 40px">From:</td> <td><input type="text" id="inputOrigin" style="width: 250px"/></td> </tr> <tr> <td style="width: 40px">To:</td> <td><input type="text" id="inputDestination" style="width: 250px"/></td> </tr> </table> </form> <p>Note: This demo shows interaction with server and thus it must be invoked from server. It doesn't work if opened from local hard drive.</p> </div> <script type="text/javascript"> // Check if demo loaded from server var strLocation = document.location.toString(); if (strLocation.indexOf('http') != 0) { alert('Since this example demonstrates interaction between server and\ javascript application, it must be loaded from server. This example does not\ work if opened from local hard drive.'); } /* * Returns airport tips source depending on passed arguments. */ function getAirportTipsSource(oArgs) { return { source: 'zpairporttips.php?q=' + escape(oArgs.keyword), sourceType: 'json/url' }; }; /** * Converts airport tip object into string. */ function airportTipToString(oTip) { return oTip.city + ' - ' + oTip.name + ' (' + oTip.code + ')'; }; /* * Initialize auto completion for "From" and "To" fields */ new Zapatec.AutoComplete({ // Attach following fields fields: [ 'inputOrigin', 'inputDestination' ], // Use server-side tips dataOnDemand: true, // Use callback function to get source callbackSource: getAirportTipsSource, // Use callback function to convert tips received from server convertTip: airportTipToString }); </script> <noscript> <br/> This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'> AJAX Component</a> - Zapatec AutoComplete Widget, but your browser does not support Javascript. <br/> <br/> </noscript> <br/><br/><br/> <div class="footer" style='width: 778px; text-align:center; margin-top:2em'> © 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong> </div> </body> </html>