The Perl and Raku Conference 2025: Greenville, South Carolina - June 27-29 Learn more

DAMI / Alien-GvaScript-1.21 / test / functional / autoCompleter / ajax.html 

            

              
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

              
<!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/prototype.js"></script>
    <script src="../../../lib/GvaScript.js"></script>
    <script>
      var ac, ac_strict, ac_noblank;
      var url = "http://localhost:8081/ac/country/";
      function setup() {  
        ac = new GvaScript.AutoCompleter(url, {
          minimumChars : 2,
          labelField   : 'value'
        });
        ac_notypeahead = new GvaScript.AutoCompleter(url, {
          minimumChars : 2,
          labelField   : 'value',
          typeAhead    : false
        });
        ac_strict = new GvaScript.AutoCompleter(url, {
          minimumChars : 2,
          labelField   : 'value',
          strict       : true
        });
        ac_noblank = new GvaScript.AutoCompleter(url, {
          minimumChars : 2,
          labelField   : 'value',
          strict       : true,
          blankOK      : false
        });
        ac_strict_nosuggest = new GvaScript.AutoCompleter(url, {
          minimumChars : 2,
          labelField   : 'value',
          strict       : true,
          autoSuggest  : false
        });
        ac_strict_notypeahead = new GvaScript.AutoCompleter(url, {
          minimumChars : 2,
          labelField   : 'value',
          strict       : true,
          autoSuggest  : true,
          typeAhead  : false
        });
      }
      document.observe('dom:loaded', setup);
    </script>
  </head>
  <body>
    <h1>Ajax Autocompleter</h1>
<p>
This autocompleter example is bound to a complete list of countries
served by the perl HTTP service at http://localhost:8081/ac/country/ that responds 
by an array: <tt>[{value: ..., label:  ..., code: ...}, ... ]</tt>
</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>
  <em>(strict: true, blankOK: true, autoSuggest: false, typeAhead: true)</em>
<p>
Autocomplete 6 : <input  name="foo.bar.4.tst" class="AC_input"
                         onfocus="ac_strict_notypeahead.autocomplete(this)"
                         ac:dependentFields="{i:'value',c:'code'}" >
  <input  name="foo.bar.4.i" size=10 readonly>
  <input  name="foo.bar.4.c" size=2 readonly>
  <em>(strict: true, blankOK: true, autoSuggest: true, typeAhead: false)</em>
</form>
</body>
</html>