Alien-GvaScript
view release on metacpan or search on metacpan
GvaScript_Builder.pm view on Meta::CPAN
<div class="TN_node">
<h1 class="TN_label">$name</h1>
<div class="TN_content">
<p><em>$description</em></p>
<div class="TN_node" onPing="jumpto_href">
<h3 class="TN_label">Table of contents</h3>
<div class="TN_content">
$toc
</div>
</div>
<hr/>
</div>
</div>
$content
</div>
</body>
</html>
__EOHTML__
}
doc/html/AutoCompleter.html view on Meta::CPAN
</div>
<div class="TN_leaf">
<a class="TN_label" href="#onCancel">onCancel</a>
<div class="TN_content"></div>
</div>
</div>
</div>
</div>
</div>
<hr/>
</div>
</div>
<div class="TN_node" id="NAME">
<h2 class="TN_label">NAME</h2>
<div class="TN_content">
<p>Alien::GvaScript::Autocompleter - autocompletion on form input fields</p>
</div>
</div>
<div class="TN_node" id="SYNOPSIS">
doc/html/ChoiceList.html view on Meta::CPAN
</div>
<div class="TN_leaf">
<a class="TN_label" href="#onCancel">onCancel</a>
<div class="TN_content"></div>
</div>
</div>
</div>
</div>
</div>
<hr/>
</div>
</div>
<div class="TN_node" id="NAME">
<h2 class="TN_label">NAME</h2>
<div class="TN_content">
<p>Alien::GvaScript::ChoiceList - Dropdown list of choices with navigation</p>
</div>
</div>
<div class="TN_node" id="SYNOPSIS">
doc/html/CustomButtons.html view on Meta::CPAN
<a class="TN_label" href="#CSS">CSS</a>
<div class="TN_content"></div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#DEPENDENCIES">DEPENDENCIES</a>
<div class="TN_content"></div>
</div>
</div>
</div>
<hr/>
</div>
</div>
<div class="TN_node" id="NAME">
<h2 class="TN_label">NAME</h2>
<div class="TN_content">
<p>Alien::GvaScript::CustomButtons - Manage buttons creation, styling and keyboard navigation</p>
</div>
</div>
<div class="TN_node" id="DESCRIPTION">
doc/html/Event.html view on Meta::CPAN
<a class="TN_label" href="#REGISTERING_AN_EVENT_HANDLER">REGISTERING AN EVENT HANDLER</a>
<div class="TN_content"><div class="TN_leaf">
<a class="TN_label" href="#Event_structure">Event structure</a>
<div class="TN_content"></div>
</div>
</div>
</div>
</div>
</div>
<hr/>
</div>
</div>
<div class="TN_node" id="NAME">
<h2 class="TN_label">NAME</h2>
<div class="TN_content">
<p>Alien::GvaScript::Event - application-specific events</p>
</div>
</div>
<div class="TN_node" id="SYNOPSIS">
doc/html/Form.html view on Meta::CPAN
</div>
</div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#GvaScript_Form_EarlyResponders">GvaScript.Form.EarlyResponders</a>
<div class="TN_content"></div>
</div>
</div>
</div>
<hr/>
</div>
</div>
<div class="TN_node" id="NAME">
<h2 class="TN_label">NAME</h2>
<div class="TN_content">
<p>Alien::GvaScript::Form - Wrapper around HTML Forms</p>
</div>
</div>
<div class="TN_node" id="SYNOPSIS">
doc/html/Grid.html view on Meta::CPAN
</div>
</div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#DEPENDENCIES">DEPENDENCIES</a>
<div class="TN_content"></div>
</div>
</div>
</div>
<hr/>
</div>
</div>
<div class="TN_node" id="NAME">
<h2 class="TN_label">NAME</h2>
<div class="TN_content">
<p>Alien::GvaScript::Grid - ChoiceList based Grid with Pagination</p>
</div>
</div>
<div class="TN_node" id="SYNOPSIS">
doc/html/Intro.html view on Meta::CPAN
<a class="TN_label" href="#AUTHORS">AUTHORS</a>
<div class="TN_content"></div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#LICENSE">LICENSE</a>
<div class="TN_content"></div>
</div>
</div>
</div>
<hr/>
</div>
</div>
<div class="TN_node" id="NAME">
<h2 class="TN_label">NAME</h2>
<div class="TN_content">
<p>Alien::GvaScript::Intro - A javascript framework born in Geneva.</p>
</div>
</div>
<div class="TN_node" id="SYNOPSIS">
doc/html/KeyMap.html view on Meta::CPAN
</div>
<div class="TN_leaf">
<a class="TN_label" href="#destroy"><code>destroy</code></a>
<div class="TN_content"></div>
</div>
</div>
</div>
</div>
</div>
<hr/>
</div>
</div>
<div class="TN_node" id="NAME">
<h2 class="TN_label">NAME</h2>
<div class="TN_content">
<p>Alien::GvaScript::KeyMap - Manage maps of handlers for key events</p>
</div>
</div>
<div class="TN_node" id="SYNOPSIS">
doc/html/Paginator.html view on Meta::CPAN
<a class="TN_label" href="#destroy">destroy</a>
<div class="TN_content"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr/>
</div>
</div>
<div class="TN_node" id="NAME">
<h2 class="TN_label">NAME</h2>
<div class="TN_content">
<p>Alien::GvaScript::Paginator - API for data pagination</p>
</div>
</div>
<div class="TN_node" id="SYNOPSIS">
doc/html/ProtoExtensions.html view on Meta::CPAN
</div>
<div class="TN_leaf">
<a class="TN_label" href="#CSSPREFIX">CSSPREFIX</a>
<div class="TN_content"></div>
</div>
</div>
</div>
</div>
</div>
<hr/>
</div>
</div>
<div class="TN_node" id="NAME">
<h2 class="TN_label">NAME</h2>
<div class="TN_content">
<p>Alien::GvaScript::ProtoExtensions - Extensions to prototype.js</p>
</div>
</div>
<div class="TN_node" id="SYNOPSIS">
doc/html/Repeat.html view on Meta::CPAN
</div>
</div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#SEE_ALSO">SEE ALSO</a>
<div class="TN_content"></div>
</div>
</div>
</div>
<hr/>
</div>
</div>
<div class="TN_node" id="NAME">
<h2 class="TN_label">NAME</h2>
<div class="TN_content">
<p>Alien::GvaScript::Repeat - Support for repeated sections</p>
</div>
</div>
<div class="TN_node" id="SYNOPSIS">
doc/html/TreeNavigator.html view on Meta::CPAN
</div>
<div class="TN_leaf">
<a class="TN_label" href="#Dynamic_tree_expansion">Dynamic tree expansion</a>
<div class="TN_content"></div>
</div>
</div>
</div>
</div>
</div>
<hr/>
</div>
</div>
<div class="TN_node" id="NAME">
<h2 class="TN_label">NAME</h2>
<div class="TN_content">
<p>Alien::GvaScript::TreeNavigator - Navigation in a tree structure</p>
</div>
</div>
<div class="TN_node" id="SYNOPSIS">
lib/Alien/GvaScript/AutoCompleter.pod view on Meta::CPAN
then the dependent field is emptied, ignoring whatever
information may be in the C<choice> element.
The dependent fields structure might also be specified as
an HTML attribute C<ac:dependentFields>, instead of an option
to the Javascript object :
<input name="some.very.3.long.2.path"
onfocus="ac.autocomplete(this)"
ac:dependentFields="{foo:'firstname',bar:'lastname',id:'id'}" />
...
<input type="hidden"
name="some.very.3.long.2.id" />
=back
=head1 METHODS
=head2 autocomplete(inputField)
Returns an event handler to be bound to the C<onfocus> event on
lib/Alien/GvaScript/CustomButtons.pod view on Meta::CPAN
// create a new button and display in container
var mybutton = new GvaScript.CustomButtons.Buttons(container, button_properties);
=head3 HTML
The button will be rendered and resulting HTML will be placed in th designated container.
<div id="my_button_will_display_here" style="border-width: 2px;">
<span class="gva-btn-container">
<span class="left"/>
<span class="center">
<button type="button" class="btn" style="width: auto;" id="btn_1227001526005">
GVA_SCRIPT_BUTTON
</button>
</span>
<span class="right"/>
</span>
</div>
=head2 Methods
=head3 new
var mybutton = new GvaScript.CustomButtons.Buttons(container, properties);
lib/Alien/GvaScript/CustomButtons.pod view on Meta::CPAN
var myactionsbar = new GvaScript.CustomButtons.ActionsBar(container, actionsbar_properties);
=head3 HTML
The list of buttons will be rendered one by one and the resulting HTML will be
appended sequentially into the designated container.
<div id="my_buttons_bar_will_display_here" class="gva-actionsbar">
<span id="btn_1236083609358" class="gva-btn-container">
<span class="left"/>
<span class="center">
<button class="btn" style="width: auto;" type="button">Modifier</button>
</span>
<span class="right"/>
</span>
<span id="btn_1236083609358" class="gva-btn-container">
<span class="left"/>
<span class="center">
<button class="btn" style="width: auto;" type="button">Modifier</button>
</span>
<span class="right"/>
</span>
</div>
=head2 Methodes
=head3 new
lib/Alien/GvaScript/Form.pod view on Meta::CPAN
=head1 NAME
Alien::GvaScript::Form - Wrapper around HTML Forms
=head1 SYNOPSIS
<form id="my_form" onsubmit="return false;">
<div repeat="foo">
<h2>Foo #{foo.count}</h2>
<input type="text" name="person.name"/>
<input type="text" name="person.bdate"/>
This is the repeated foo section
<table>
<tr repeat="bar">
<td>Item #{bar.count}</td>
<td><input name="#{bar.path}.buz"></td>
<td><button onclick="GvaScript.Form.remove('#{bar.path}')">
Remove this row
</button></td>
</tr>
</table>
lib/Alien/GvaScript/Form.pod view on Meta::CPAN
</script>
=head1 DESCRIPTION
This module of L<Alien::GvaScript> manages forms with
hierarchical fields and dynamically repeated sections.
It works in close collaboration with L<Alien::GvaScript::Repeat>.
The design is partially inspired by the C<Web Forms 2.0> proposal
(L<http://www.whatwg.org/specs/web-forms/current-work/>), but is
not an attempt to implement the proposed specification: there are
some differences both in syntax and in semantics.
=head1 Constructor
new GvaScript.Form(form_id[, options])
=over 12
=item form_id
lib/Alien/GvaScript/Grid.pod view on Meta::CPAN
<div id="ex_grid_toolbar" class="dmweb-grid-toolbar">
<div class="dmweb-paginatorbar">
<div title="Dernière page" class="last"></div>
<div title="Page suivante" class="forward"></div>
<div class="text">1 à 3 de 15</div>
<div title="Page précédente" class="back inactive"></div>
<div title="Première page" class="first inactive"></div>
</div>
<div class="dmweb-grid-actionsbar">
<span id="grid_id_btn_0" class="dmweb-btn-container">
<span class="left"/>
<span class="center">
<button class="btn" style="width: auto;" type="button">Add</button>
</span>
<span class="right"/>
</span>
</div>
</div>
</div>
=head2 CSS
/* class given to grid list container when an AJAX request is being affected */
.dmweb-loading {
lib/Alien/GvaScript/KeyMap.pod view on Meta::CPAN
are pressed. By contrast, a C<null> value specifies that
modifiers are ignored (the rule fires in any case).
=item regex
Either a string containing a regular expression, or an already built
Javascript RegExp object. Strings will be automatically converted
to regular expressions, with start anchor C<^> and end anchor C<$>
automatically added. If you supply an already built RegExp object,
make sure to deal properly with the anchors; otherwise the rule
might fire in unexpected cases (for example the plain regex C</[AEIOU]/>
would match any builtin keyname like C<RETURN> or C<ESCAPE>, which
is probably not the intended meaning of the rule).
=item handler
The function to be called when the rule succeeds.
=back
lib/Alien/GvaScript/Paginator.pod view on Meta::CPAN
=back
=head2 Navigation Links
Navigation links are the icons used to navigate through pages (page flipping). Along with icons, a
text with start-to-end index of displayed records / number of total records is displayed.
=head3 HTML
<div class="gva-paginatorbar">
<div title="Dernière page" class="last"/>
<div title="Page suivante" class="forward"/>
<div class="text">1 à 11 de 115</div>
<div title="Page précédente" class="back inactive"/>
<div title="Première page" class="first inactive"/>
</div>
Note that the icons are aware if they should be active/inactive. An 'inactive' css classname would be set to differentiate.
=head3 CSS
Easy customization of icons
By default, css classnames are prefixed by 'gva'.
lib/Alien/GvaScript/Repeat.pod view on Meta::CPAN
=head1 DESCRIPTION
This module of L<Alien::GvaScript> implements a mechanism for repeated
elements within an HTML page. The main use is within forms, for
dynamic expansion of subforms, so it is quite likely that you will
want to use the L<Alien::GvaScript::Form> API instead of calling the
present module directly. However, the repeat mechanism will work for
any kind of HTML element.
The design is partially inspired by the C<Web Forms 2.0> proposal
(L<http://www.whatwg.org/specs/web-forms/current-work/>), but is
not an attempt to implement the proposed specification: there are
some differences both in syntax and in semantics.
=head2 Terminology
At initialization stage, the DOM is inspected for finding
I<repeat elements> (elements having a C<repeat> attribute).
These elements are removed from the DOM and replaced
by I<placeholders> (empty DOM elements, just marking where
lib/Alien/GvaScript/TreeNavigator.pod view on Meta::CPAN
open the node
=item C<keypad ->
close the node
=item C<keypad *>
open the node and all its subnodes
=item C<keypad />
close the node and all its subnodes
=item C<Ctrl-keypad *>
activate "show all" mode (the content of closed nodes is nevertheless
visible, which may be useful for printing)
=item C<Ctrl-keypad />
deactivate the "show all" mode
=item C<TAB>
if closed, open the node; if already opened, pass focus to the next
item (maybe the next node, or another tabindex-enabled HTML element,
such as a form control).
lib/Alien/GvaScript/lib/GvaScript.js view on Meta::CPAN
//----------customButtons.js
// depends: keyMap.js
GvaScript.CustomButtons = {};
GvaScript.CustomButtons.Button = Class.create();
// Renders Buttons in the following HTML structure
// <span class="gva-btn-container">
// <span class="left"/>
// <span class="center">
// <button class="btn" style="width: auto;" id="btn_1227001526005">
// Créer
// </button>
// </span>
// <span class="right"/>
// </span>
Object.extend(GvaScript.CustomButtons.Button.prototype, function() {
var bcss = CSSPREFIX();
function _extendCss(button_options) {
// basic class
var button_css = bcss+'-btn-container';
// extended classes
switch (typeof button_options.css) {
lib/Alien/GvaScript/lib/GvaScript.js view on Meta::CPAN
width: 'auto',
type: 'button',
label: 'GVA_SCRIPT_BUTTON'
};
this.options = Object.extend(defaults, options || {});
if(_evalCondition(this.options.condition)) {
try {
this.container = $(container);
this.container.insert(_render(this.options));
this.btnContainer = $(this.options.id); // the outer <span/>
this.btnElt = this.btnContainer.down('.btn'); // the <button/>
// setting inline style on the button container
if(typeof this.options.style != 'undefined') {
this.btnContainer.setStyle(this.options.style);
}
// setting tabindex on button if any
if(typeof this.options.tabindex != 'undefined') {
this.btnElt.writeAttribute('tabindex', this.options.tabindex);
}
lib/Alien/GvaScript/lib/GvaScript.js view on Meta::CPAN
this.select(this.lastBtn());
Event.stop(event);
}
}
function _addHandlers() {
this.buttons.each(function(btnContainer) {
var btn;
// if the button is a GvaScript.CustomButtons.BUTTON, then the actual <button> element
// will be embedded and selectable via .btn classname:
// <span class="gva-btn-container">
// <span class="left"/>
// <span class="center">
// <button accesskey="r" class="btn" style="width: auto;" id="btn_1226916357164">
// Rechercher dans Calvin
// </button>
// </span>
// <span class="right"/>
// </span>
// this will be cleaner when all application buttons are transformed into
// GvaScript.CustomButtons.Button instances
if(btnContainer.tagName.search(/^(INPUT|BUTTON)$/i) > -1) btn = btnContainer;
else {
btn = btnContainer.down('.btn');
btn.visible = function() {return btnContainer.visible();}
// support focus function on span.buttonContainer
btnContainer.focus = function() {btn.focus();}
}
lib/Alien/GvaScript/lib/prototype.js view on Meta::CPAN
return (this.match(matchAll) || []).map(function(scriptTag) {
return (scriptTag.match(matchOne) || ['', ''])[1];
});
}
function evalScripts() {
return this.extractScripts().map(function(script) { return eval(script) });
}
function escapeHTML() {
return this.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
}
function unescapeHTML() {
return this.stripTags().replace(/</g,'<').replace(/>/g,'>').replace(/&/g,'&');
}
function toQueryParams(separator) {
var match = this.strip().match(/([^?#]*)(#.*)?$/);
if (!match) return { };
lib/Alien/GvaScript/lib/prototype.js view on Meta::CPAN
if ( ret === 0 ) {
hasDuplicate = true;
}
return ret;
};
}
(function(){
var form = document.createElement("div"),
id = "script" + (new Date).getTime();
form.innerHTML = "<a name='" + id + "'/>";
var root = document.documentElement;
root.insertBefore( form, root.firstChild );
if ( !!document.getElementById( id ) ) {
Expr.find.ID = function(match, context, isXML){
if ( typeof context.getElementById !== "undefined" && !isXML ) {
var m = context.getElementById(match[1]);
return m ? m.id === match[1] || typeof m.getAttributeNode !== "undefined" && m.getAttributeNode("id").nodeValue === match[1] ? [m] : undefined : [];
}
lib/Alien/GvaScript/lib/unittest.js view on Meta::CPAN
this.log.innerHTML =
'<div id="logsummary"></div>' +
'<table id="logtable">' +
'<thead><tr><th>Status</th><th>Test</th><th>Message</th></tr></thead>' +
'<tbody id="loglines"></tbody>' +
'</table>';
this.logsummary = $('logsummary');
this.loglines = $('loglines');
},
_toHTML: function(txt) {
return txt.escapeHTML().replace(/\n/g,"<br/>");
},
addLinksToResults: function(){
$$("tr.failed .nameCell").each( function(td){ // todo: limit to children of this.log
td.title = "Run only this test";
Event.observe(td, 'click', function(){ window.location.search = "?tests=" + td.innerHTML;});
});
$$("tr.passed .nameCell").each( function(td){ // todo: limit to children of this.log
td.title = "Run all tests";
Event.observe(td, 'click', function(){ window.location.search = "";});
});
src/customButtons.js view on Meta::CPAN
// depends: keyMap.js
GvaScript.CustomButtons = {};
GvaScript.CustomButtons.Button = Class.create();
// Renders Buttons in the following HTML structure
// <span class="gva-btn-container">
// <span class="left"/>
// <span class="center">
// <button class="btn" style="width: auto;" id="btn_1227001526005">
// Créer
// </button>
// </span>
// <span class="right"/>
// </span>
Object.extend(GvaScript.CustomButtons.Button.prototype, function() {
var bcss = CSSPREFIX();
function _extendCss(button_options) {
// basic class
var button_css = bcss+'-btn-container';
// extended classes
switch (typeof button_options.css) {
src/customButtons.js view on Meta::CPAN
width: 'auto',
type: 'button',
label: 'GVA_SCRIPT_BUTTON'
};
this.options = Object.extend(defaults, options || {});
if(_evalCondition(this.options.condition)) {
try {
this.container = $(container);
this.container.insert(_render(this.options));
this.btnContainer = $(this.options.id); // the outer <span/>
this.btnElt = this.btnContainer.down('.btn'); // the <button/>
// setting inline style on the button container
if(typeof this.options.style != 'undefined') {
this.btnContainer.setStyle(this.options.style);
}
// setting tabindex on button if any
if(typeof this.options.tabindex != 'undefined') {
this.btnElt.writeAttribute('tabindex', this.options.tabindex);
}
src/customButtons.js view on Meta::CPAN
this.select(this.lastBtn());
Event.stop(event);
}
}
function _addHandlers() {
this.buttons.each(function(btnContainer) {
var btn;
// if the button is a GvaScript.CustomButtons.BUTTON, then the actual <button> element
// will be embedded and selectable via .btn classname:
// <span class="gva-btn-container">
// <span class="left"/>
// <span class="center">
// <button accesskey="r" class="btn" style="width: auto;" id="btn_1226916357164">
// Rechercher dans Calvin
// </button>
// </span>
// <span class="right"/>
// </span>
// this will be cleaner when all application buttons are transformed into
// GvaScript.CustomButtons.Button instances
if(btnContainer.tagName.search(/^(INPUT|BUTTON)$/i) > -1) btn = btnContainer;
else {
btn = btnContainer.down('.btn');
btn.visible = function() {return btnContainer.visible();}
// support focus function on span.buttonContainer
btnContainer.focus = function() {btn.focus();}
}
test/functional/autoCompleter/ajax.html view on Meta::CPAN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="/test.css" rel="stylesheet" type="text/css" media="screen" />
<link href="/images/GvaScript.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="../../../lib/Alien/GvaScript/lib/prototype.js"></script>
<script src="../../../lib/Alien/GvaScript/lib/GvaScript.js"></script>
<script>
var ac, ac_strict, ac_noblank;
var url = "http://localhost:8085/ac/country/";
function setup() {
ac = new GvaScript.AutoCompleter(url, {
minimumChars : 2,
test/functional/autoCompleter/ajax.html view on Meta::CPAN
</p>
<form>
Autocomplete 1 : <input onfocus="ac.autocomplete(this)" class="AC_input">
Normal : <input value="just a normal field">
<p>
Autocomplete 2 : <input onfocus="ac_notypeahead.autocomplete(this)" class="AC_input"/>
<em>(typeAhead: false)</em>
<p>
Autocomplete 3 : <input onfocus="ac_strict.autocomplete(this)" class="AC_input" />
<em>(strict: true, blankOK: true)</em>
<p>
Autocomplete 4 : <input onfocus="ac_noblank.autocomplete(this)" class="AC_input" />
<em>(strict: true, blankOK: false)</em>
<p>
Autocomplete 5 : <input name="foo.bar.3.tst" class="AC_input"
onfocus="ac_strict_nosuggest.autocomplete(this)"
ac:dependentFields="{i:'value',c:'code'}" >
<input name="foo.bar.3.i" size=10 readonly>
<input name="foo.bar.3.c" size=2 readonly>
test/functional/autoCompleter/basic.html view on Meta::CPAN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="../../test.css" rel="stylesheet" type="text/css">
<link href="../../images/GvaScript.css" rel="stylesheet" type="text/css">
<script src="../../../lib/Alien/GvaScript/lib/prototype.js"></script>
<script src="../../../lib/Alien/GvaScript/lib/GvaScript.js"></script>
<style type="text/css">
label {display: inline-table; width: 120px; text-align: right}
.AC_dropdown em {font: 8pt 'courier new'; font-style: normal}
</style>
test/functional/autoCompleter/basic.html view on Meta::CPAN
typeAhead: true
});
</script>
</head>
<body>
<h1>Basic Autocompleters</h1>
<p>
Basic autocompleters are bound to a static list or a function that returns a static list.<br/>
Static list datasource gets filtered automatically to return values that match user's input.<br/>
Function datasources manually filter a list according to custom needs.<br/>
</p><br/>
<label>Title<sup>static list</sup> :</label> <input type="text" autocomplete="off" class="AC_input" onfocus="ac1.autocomplete(this)" />
<em>(minimumChars: 0, typeAhead: false, autoSuggest: false, ignorePrefix: true)</em>
<br/><br/>
<label>US state<sup>static list</sup> :</label> <input type="text" autocomplete="off" class="AC_input" onfocus="ac2.autocomplete(this)" />
<em>(minimumChars: 1, typeAhead: false, autoSuggest: true, autoSuggestDelay: 100)</em>
<br/><br/>
<label>US state<sup>function</sup> :</label> <input type="text" autocomplete="off" class="AC_input" onfocus="ac3.autocomplete(this)" id="inpt_ac3"/>
<em>(minimumChars: 2, typeAhead: true, autoSuggest: true, autoSuggestDelay: 1000)</em>
</body>
</html>
test/functional/autoCompleter/dependent.html view on Meta::CPAN
</head>
<body>
<h1>Autocompleter with dependent fields</h1>
<p>Conveniently relate other inputs to the autocompleter</p>
<form>
Sandwich : <input name="main" class="AC_input" onfocus="ac.autocomplete(this)" />
Price : <input name="detail" size="4" disabled style="border: 1px solid #ddd;background-color: #eee"/>
<input type=submit value="place order" />
</form>
</body>
</html>
test/functional/autoCompleter/jsonp.html view on Meta::CPAN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="../../test.css" rel="stylesheet" type="text/css">
<link href="../../images/GvaScript.css" rel="stylesheet" type="text/css">
<script src="../../../lib/Alien/GvaScript/lib/prototype.js"></script>
<script src="../../../lib/Alien/GvaScript/lib/GvaScript.js"></script>
<script>
var ac1 = new GvaScript.AutoCompleter({
json_url: 'http://search.yahooapis.com/WebSearchService/V1/relatedSuggestion?appid=YahooDemo&query=?1&output=json&callback=?2',
json_list: 'ResultSet/Result'}, {
minimumChars: 2,
test/functional/autoCompleter/jsonp.html view on Meta::CPAN
);
</script>
</head>
<body>
<h1>JSONP Autocompleters</h1>
<p>
These autocompleters are bound to JSONP services by google, yahoo! and flickr.<br />
JSONP is a technique that allows you to transfer JSON data across multiple domains.<br/>
</p><br/>
Google Suggest : <input type="text" autocomplete="off" class="AC_input" onfocus="ac3.autocomplete(this)" /><br />
<em>(http://suggestqueries.google.com/complete/search?hl=en&qu=?1&json=t&jsonp=?2)</em>
<br/><br/>
Yahoo Suggest : <input type="text" autocomplete="off" class="AC_input" onfocus="ac1.autocomplete(this)" /><br />
<em>(http://search.yahooapis.com/WebSearchService/V1/relatedSuggestion?appid=YahooDemo&query=?1&output=json&callback=?2)</em>
<br/><br/>
Flickr Search : <input type="text" autocomplete="off" class="AC_input" onfocus="ac2.autocomplete(this)"
onlegalvalue="$('image_pholder').update(new Element('img', {src: event.choice.media.m}))"
size="50"/><br />
<em>(http://api.flickr.com/services/feeds/photos_public.gne?tags=?1&tagmode=any&format=json&jsoncallback=?2)</em>
<br/><br/>
<div id="image_pholder"></div>
</body>
</html>
test/functional/autoCompleter/multivalued.html view on Meta::CPAN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="/test.css" rel="stylesheet" type="text/css" media="screen" />
<link href="/images/GvaScript.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="../../../lib/Alien/GvaScript/lib/prototype.js"></script>
<script src="../../../lib/Alien/GvaScript/lib/GvaScript.js"></script>
<script>
var countries_ac =
new GvaScript.AutoCompleter("http://localhost:8085/ac/country/", {
minimumChars: 2,
autoSuggest: true,
typeAhead: false,
blankOK: true,
labelField: 'value',
test/functional/autoCompleter/multivalued.html view on Meta::CPAN
<h1>Multivalued Autocompleter</h1>
<p>
This autocompleter example is bound to a complete list of countries
served by the perl HTTP service at http://localhost:8085/ac/country/ that responds
by an array: <tt>[{value: ..., label: ..., code: ...}, ... ]</tt>
</p>
<h4>Ajax request</h4>
Select multi-countries:
<input type="text" class="AC_input" autocomplete="off" size="50" onfocus="countries_ac.autocomplete(this);"/>
<br/>
</body>
</html>
( run in 2.091 seconds using v1.01-cache-2.11-cpan-df04353d9ac )