1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3 <head>
4  <title>Autosuggest demo</title>
5  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
6  <style type="text/css">
7     div.Autosuggest {
8         background-color:#fff;
9         border: 1px solid black;
10         position: absolute;
11         width: 0;
12         top:0
13     }
14     div.Autosuggest select {
15         border: 3px solid transparent;
16         background: transparent;
17         margin: -3px;
18         width: 150px;
19     }
20     html>body div.Autosuggest {
21         overflow: hidden;
22         width: auto;
23     }
24     dt {
25         color: #555;
26     }
27     input {
28         width: 200px;
29     }
30  </style>
31 </head>
32 <body>
33   <h5><a href="http://debugger.ru/projects/browserextensions/dom/autosuggest">BrowserExtensions/DOM/Autosuggest demo</a></h5>
34   <form>
35    <div>
36      <table>
37          <tr>
38              <td valign="bottom" width="300px">
39                  <label style="color: blue">Type here: </label><input id="suggest_target" />
40              </td>
41              <td valign="bottom">
42                  Input match: <br />
43                  <select onchange="s.setFilterMatch(this.value)">
44                      <option value="any">at any position</option>
45                      <option value="start" selected="selected">from start</option>
46                      <option value="end">from end</option>
47                      <option value="exact">exact string</option>
48                  </select>
49              </td>
50          </tr>
51          <tr>
52              <td colspan="2">Possible matches:<br />
53                  <div id="pos_matches" style="border: 1px solid black; border-left: 0; border-right: 0;"></div>
54              </td>
55          </tr>
56          <tr>
57              <td valign="top" width="50%">
58                  ����������� ������, ��� ������� � ���� �����:
59                   <dl>
60                       <dt>Ctrl+space</dt>
61                       <dt>Arrow Up</dt>
62                       <dt>Arrow Down</dt>
63                       <dd>����������� ������ ���������</dd>
64                       <dt>PageUp</dt>
65                       <dt>Pagedown</dt>
66                       <dt>Home</dt>
67                       <dt>End</dt>
68                       <dd>����������� ������ ���������, ���� �����. ��� ������� ������ - ���������� ������������ �� ����.</dd>
69                       <dt>Esc</dt>
70                       <dd>������� ������, ���� �������. �������� ��������� ������ � ��������������� ������.</dd>
71                       <dt>Enter</dt>
72                       <dd>����� ���������, ���� ������ �������. �������� ����� �� ������ � ��������������� ������.</dd>
73                       <dt>���� 2 � ����� ��������� ����</dt>
74                       <dd>����������� ������ ���������, ���� �����. ���������� ��������� �� �������� ������.</dd>
75                       <dt>Backspace</dt>
76                       <dd>����������� ������ ���������, ���� � ���� ����� �������� ������� ����� 2 �������� � � ������ ��������� ���� ������������.</dd>
77                   </dl>
78              </td>
79              <td valign="top" width="50%">
80                  Control keys:
81                   <dl>
82                       <dt>Ctrl+space</dt>
83                       <dt>Arrow Up</dt>
84                       <dt>Arrow Down</dt>
85                       <dd>Display suggestions list</dd>
86                       <dt>PageUp</dt>
87                       <dt>Pagedown</dt>
88                       <dt>Home</dt>
89                       <dt>End</dt>
90                       <dd>Display suggestions list, when hidden. Otherwise - contol the list movement.</dd>
91                       <dt>Esc</dt>
92                       <dd>Hide suggestions list, when visible. Delete entered text otherwise.</dd>
93                       <dt>Enter</dt>
94                       <dd>Paste suggestion in the field, when the list is visible. Submit form otherwise.</dd>
95                       <dt>Typing 2+ letters</dt>
96                       <dd>Display suggestions list, when hidden. Filter suggestions.</dd>
97                       <dt>Backspace</dt>
98                       <dd>Display suggestions list, when after deletion 2+ letters are still available and list has the matches.</dd>
99                   </dl>
100              </td>
101          </tr>
102      </table>
103     </div>
104   </form>
105   <script src="../helpers.js" type="text/javascript"></script>
106   <script src="../domextensions.js" type="text/javascript"></script>
107   <script src="../objectextensions.js" type="text/javascript"></script>
108   <script src="../arrayextensions.js" type="text/javascript"></script>
109   <script src="../regexpextensions.js" type="text/javascript"></script>
110   <script src="../documentselection.js" type="text/javascript"></script>
111   <script src="../dom/selectbox.js" type="text/javascript"></script>
112   <script src="../dom/autosuggest.js" type="text/javascript"></script>
113   <script type="text/javascript">
114        var s = new Autosuggest('suggest_target')
115           ,suggestions = ['St Petersburg','Moscow','Arkhangelsk','Astrakhan',
116                           'Belgorod','Blagoveschensk','Bratsk','Bryansk',
117                           'Cheboksary','Chelyabinsk','Chita',
118                           'Ekaterinburg','Elista','Gelendzhik','Irkutsk','Izhevsk',
119                           'Kaliningrad','Kaluga','Kazan','Khabarovsk','Kirov','Kislovodsk','Kostroma',
120                           'Krasnodar','Krasnoyarsk','Kursk',
121                           'Magadan','Magnitogorsk','Murmansk',
122                           'Naberezhnye chelny','Nakhodka','Nalchik','Nizhny novgorod','Novosibirsk',
123                           'Omsk','Orel','Orenburg',
124                           'Penza','Perm','Petropavlovsk-kamchatsky','Petrozavodsk','Pskov','Pyatigorsk',
125                           'Rostov-on-don','Ryazan','Samara','Saratov','Smolensk','Sochi','Stavropol','Suzdal',
126                           'Tobolsk','Togliatti','Tuapse','Tula','Tver','Tyumen','Ufa','Ulan-ude','Ulyanovsk',
127                           'Veliky novgorod','Vladimir','Vladivostok','Volgograd','Vologda','Voronezh','Vyborg',
128                           'Yakutsk','Yaroslavl','Yoshkar-ola','Yuzhno-sakhalinsk','Salekhard','Tomsk','Tambov'
129                          ];
130        s.setSuggestions(suggestions);
131        document.getElementById('pos_matches').innerHTML = suggestions.join(", ");
132   </script>
133  </div>
134 </body>
135</html>