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