Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
14217 anikendra 1 
<!DOCTYPE html>
2 
<html>
3 
  <head>
4 
    <script src="../bower_components/jquery/jquery.js"></script>
5 
    <script src="../dist/typeahead.bundle.js"></script>
6 
 
7 
    <style>
8 
      .container {
9 
        width: 800px;
10 
        margin: 50px auto;
11 
      }
12 
 
13 
      .typeahead-wrapper {
14 
        display: block;
15 
        margin: 50px 0;
16 
      }
17 
 
18 
      .tt-dropdown-menu {
19 
        background-color: #fff;
20 
        border: 1px solid #000;
21 
      }
22 
 
23 
      .tt-suggestion.tt-cursor {
24 
        background-color: #ccc;
25 
      }
26 
 
27 
      .triggered-events {
28 
        float: right;
29 
        width: 500px;
30 
        height: 300px;
31 
      }
32 
    </style>
33 
  </head>
34 
 
35 
  <body>
36 
    <div class="container">
37 
      <textarea class="triggered-events"></textarea>
38 
      <form action="/where" method="GET">
39 
        <div class="typeahead-wrapper">
40 
          <input class="states" name="states" type="text" placeholder="states" value="Michigan">
41 
          <input type="submit">
42 
        </div>
43 
      </form>
44 
      <div class="typeahead-wrapper">
45 
        <input class="bad-tokens" type="text" placeholder="bad tokens">
46 
      </div>
47 
      <div class="typeahead-wrapper">
48 
        <input class="regex-symbols" type="text" placeholder="regex symbols">
49 
      </div>
50 
      <div class="typeahead-wrapper">
51 
        <input class="header-footer" type="text" placeholder="header footer">
52 
      </div>
53 
      <div class="typeahead-wrapper">
54 
        <input class="ltr" type="text" placeholder="ltr">
55 
      </div>
56 
      <div class="typeahead-wrapper">
57 
        <input class="rtl" type="text" placeholder="rtl">
58 
      </div>
59 
      <div class="typeahead-wrapper">
60 
        <input class="mixed" type="text" placeholder="mixed">
61 
      </div>
62 
    </div>
63 
    </div>
64 
 
65 
    <script>
66 
      var states = new Bloodhound({
67 
        datumTokenizer: function(d) {
68 
          return Bloodhound.tokenizers.whitespace(d.val);
69 
        },
70 
        queryTokenizer: Bloodhound.tokenizers.whitespace,
71 
        local: [
72 
          { val: 'Alabama' },
73 
          { val: 'Alaska' },
74 
          { val: 'Arizona' },
75 
          { val: 'Arkansas' },
76 
          { val: 'California' },
77 
          { val: 'Colorado' },
78 
          { val: 'Connecticut' },
79 
          { val: 'Delaware' },
80 
          { val: 'Florida' },
81 
          { val: 'Georgia' },
82 
          { val: 'Hawaii' },
83 
          { val: 'Idaho' },
84 
          { val: 'Illinois' },
85 
          { val: 'Indiana' },
86 
          { val: 'Iowa' },
87 
          { val: 'Kansas' },
88 
          { val: 'Kentucky' },
89 
          { val: 'Louisiana' },
90 
          { val: 'Maine' },
91 
          { val: 'Maryland' },
92 
          { val: 'Massachusetts' },
93 
          { val: 'Michigan' },
94 
          { val: 'Minnesota' },
95 
          { val: 'Mississippi' },
96 
          { val: 'Missouri' },
97 
          { val: 'Montana' },
98 
          { val: 'Nebraska' },
99 
          { val: 'Nevada' },
100 
          { val: 'New Hampshire' },
101 
          { val: 'New Jersey' },
102 
          { val: 'New Mexico' },
103 
          { val: 'New York' },
104 
          { val: 'North Carolina' },
105 
          { val: 'North Dakota' },
106 
          { val: 'Ohio' },
107 
          { val: 'Oklahoma' },
108 
          { val: 'Oregon' },
109 
          { val: 'Pennsylvania' },
110 
          { val: 'Rhode Island' },
111 
          { val: 'South Carolina' },
112 
          { val: 'South Dakota' },
113 
          { val: 'Tennessee' },
114 
          { val: 'Texas' },
115 
          { val: 'Utah' },
116 
          { val: 'Vermont' },
117 
          { val: 'Virginia' },
118 
          { val: 'Washington' },
119 
          { val: 'West Virginia' },
120 
          { val: 'Wisconsin' },
121 
          { val: 'Wyoming' }
122 
        ]
123 
      });
124 
 
125 
      states.initialize();
126 
 
127 
      $('.states').typeahead({
128 
        highlight: true
129 
      },
130 
      {
131 
        displayKey: 'val',
132 
        source: states.ttAdapter()
133 
      });
134 
 
135 
 
136 
      var badTokens = new Bloodhound({
137 
        datumTokenizer: function(d) { return d.tokens; },
138 
        queryTokenizer: Bloodhound.tokenizers.whitespace,
139 
        local: [
140 
          {
141 
            value1: 'all bad',
142 
            jake: '111',
143 
            tokens: ['  ', ' ', null, undefined, false, 'all', 'bad']
144 
          },
145 
          {
146 
            value1: 'whitespace',
147 
            jake: '112',
148 
            tokens: ['  ', ' ', '\t', '\n', 'whitespace']
149 
          },
150 
          {
151 
            value1: 'undefined',
152 
            jake: '113',
153 
            tokens: [undefined, 'undefined']
154 
          },
155 
          {
156 
            value1: 'null',
157 
            jake: '114',
158 
            tokens: [null, 'null']
159 
          },
160 
          {
161 
            value1: 'false',
162 
            jake: '115',
163 
            tokens: [false, 'false']
164 
          }
165 
        ]
166 
      });
167 
 
168 
      badTokens.initialize();
169 
 
170 
      $('.bad-tokens').typeahead(null, {
171 
        displayKey: 'value1',
172 
        source: badTokens.ttAdapter()
173 
      });
174 
 
175 
      var regexSymbols = new Bloodhound({
176 
        datumTokenizer: function(d) {
177 
          return Bloodhound.tokenizers.whitespace(d.val);
178 
        },
179 
        queryTokenizer: Bloodhound.tokenizers.whitespace,
180 
        local: [
181 
          { val: '*.js' },
182 
          { val: '[Tt]ypeahead.js' },
183 
          { val: '^typeahead.js$' },
184 
          { val: 'typeahead.js(0.8.2)' },
185 
          { val: 'typeahead.js(@\\d.\\d.\\d)' },
186 
          { val: 'typeahead.js@0.8.2' }
187 
        ]
188 
      });
189 
 
190 
      regexSymbols.initialize();
191 
 
192 
      $('.regex-symbols').typeahead(null, {
193 
        displayKey: 'val',
194 
        source: regexSymbols.ttAdapter()
195 
      });
196 
 
197 
      var abc = new Bloodhound({
198 
        datumTokenizer: function(d) {
199 
          return Bloodhound.tokenizers.whitespace(d.val);
200 
        },
201 
        queryTokenizer: Bloodhound.tokenizers.whitespace,
202 
        local: [
203 
          { val: 'a' },
204 
          { val: 'ab' },
205 
          { val: 'abc' },
206 
          { val: 'abcd' },
207 
          { val: 'abcde' }
208 
        ]
209 
      });
210 
 
211 
      abc.initialize();
212 
 
213 
      $('.header-footer').typeahead(null, {
214 
        displayKey: 'val',
215 
        source: abc.ttAdapter(),
216 
        templates: {
217 
          header: '<h3>Header</h3>',
218 
          footer: '<h3>Footer</h3>'
219 
        }
220 
      },
221 
      {
222 
        displayKey: 'val',
223 
        source: abc.ttAdapter(),
224 
        templates: {
225 
          header: '<h3>start</h3>',
226 
          footer: '<h3>end</h3>',
227 
          empty: '<h3>empty</h3>'
228 
        }
229 
      });
230 
 
231 
      var ltr = new Bloodhound({
232 
        datumTokenizer: function(d) {
233 
          return Bloodhound.tokenizers.whitespace(d.val);
234 
        },
235 
        queryTokenizer: Bloodhound.tokenizers.whitespace,
236 
        local: [
237 
          { val: "one" },
238 
          { val: "two three" },
239 
          { val: "four" },
240 
          { val: "five six" },
241 
          { val: "seven" }
242 
        ]
243 
      });
244 
 
245 
      ltr.initialize();
246 
 
247 
      $('.ltr').typeahead({
248 
        highlight: true
249 
      },
250 
      {
251 
        displayKey: 'val',
252 
        source: ltr.ttAdapter()
253 
      });
254 
 
255 
      var rtl = new Bloodhound({
256 
        datumTokenizer: function(d) {
257 
          return Bloodhound.tokenizers.whitespace(d.val);
258 
        },
259 
        queryTokenizer: Bloodhound.tokenizers.whitespace,
260 
        local: [
261 
          { val: "שלום" },
262 
          { val: "ערב טוב" },
263 
          { val: "מה שלומך" },
264 
          { val: "רב תודות" },
265 
          { val: "אין דבר" }
266 
        ]
267 
      });
268 
 
269 
      rtl.initialize();
270 
 
271 
      $('.rtl').typeahead({
272 
        highlight: true
273 
      },
274 
      {
275 
        displayKey: 'val',
276 
        source: rtl.ttAdapter()
277 
      });
278 
 
279 
      var mixed = new Bloodhound({
280 
        datumTokenizer: function(d) {
281 
          return Bloodhound.tokenizers.whitespace(d.val);
282 
        },
283 
        queryTokenizer: Bloodhound.tokenizers.whitespace,
284 
        local: [
285 
          { val: "שלום" },
286 
          { val: "ערב טוב" },
287 
          { val: "מה שלומך" },
288 
          { val: "one" },
289 
          { val: "two three" }
290 
        ]
291 
      });
292 
 
293 
      mixed.initialize();
294 
 
295 
      $('.mixed').typeahead({
296 
        highlight: true
297 
      },
298 
      {
299 
        displayKey: 'val',
300 
        source: mixed.ttAdapter()
301 
      });
302 
 
303 
 
304 
      $('input').on([
305 
        'typeahead:initialized',
306 
        'typeahead:initialized:err',
307 
        'typeahead:selected',
308 
        'typeahead:autocompleted',
309 
        'typeahead:cursorchanged',
310 
        'typeahead:opened',
311 
        'typeahead:closed'
312 
      ].join(' '), logTypeaheadEvent);
313 
 
314 
      $('form').on('submit', logSubmitEvent);
315 
 
316 
      function logSubmitEvent($e) {
317 
        var text;
318 
 
319 
        $e && $e.preventDefault();
320 
 
321 
        text = JSON.stringify($(this).serializeArray());
322 
        writeToTextarea('submit', text);
323 
      }
324 
 
325 
      function logTypeaheadEvent($e) {
326 
        var args, type, text;
327 
 
328 
        args = [].slice.call(arguments, 1);
329 
        type = $e.type;
330 
        text = window.JSON ? JSON.stringify(args) : '';
331 
 
332 
        writeToTextarea(type, text);
333 
      }
334 
 
335 
      function writeToTextarea(/* lines */) {
336 
        var $textarea, val, text;
337 
 
338 
        $textarea = $('.triggered-events');
339 
        val = $textarea.val();
340 
        text = [].join.call(arguments, '\n');
341 
 
342 
        $textarea.val([val, text, '\n'].join('\n'));
343 
        $textarea[0].scrollTop = $textarea[0].scrollHeight;
344 
      }
345 
    </script>
346 
  </body>
347 
</html>