Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
15403 manish.sha 1 
<!DOCTYPE html>
2 
<html>
3 
  <head>
4 
    <title></title>
5 
    <script src="../../bower_components/jquery/jquery.js"></script>
6 
    <script src="../../dist/typeahead.bundle.js"></script>
7 
 
8 
    <style>
9 
      .container {
10 
        width: 800px;
11 
        margin: 50px auto;
12 
      }
13 
 
14 
      .typeahead-wrapper {
15 
        display: block;
16 
        margin: 50px 0;
17 
      }
18 
 
19 
      .tt-dropdown-menu {
20 
        background-color: #fff;
21 
        border: 1px solid #000;
22 
      }
23 
 
24 
      .tt-suggestion.tt-cursor {
25 
        background-color: #ccc;
26 
      }
27 
    </style>
28 
  </head>
29 
 
30 
  <body>
31 
    <div class="container">
32 
      <form action="/where" method="GET">
33 
        <div class="typeahead-wrapper">
34 
          <input id="states" name="states" type="text">
35 
          <input type="submit">
36 
        </div>
37 
      </form>
38 
    </div>
39 
 
40 
    <script>
41 
      var states = new Bloodhound({
42 
        datumTokenizer: function(d) {
43 
          return Bloodhound.tokenizers.whitespace(d.val);
44 
        },
45 
        queryTokenizer: Bloodhound.tokenizers.whitespace,
46 
        local: [
47 
          { val: 'Alabama' },
48 
          { val: 'Alaska' },
49 
          { val: 'Arizona' },
50 
          { val: 'Arkansas' },
51 
          { val: 'California' },
52 
          { val: 'Colorado' },
53 
          { val: 'Connecticut' },
54 
          { val: 'Delaware' },
55 
          { val: 'Florida' },
56 
          { val: 'Georgia' },
57 
          { val: 'Hawaii' },
58 
          { val: 'Idaho' },
59 
          { val: 'Illinois' },
60 
          { val: 'Indiana' },
61 
          { val: 'Iowa' },
62 
          { val: 'Kansas' },
63 
          { val: 'Kentucky' },
64 
          { val: 'Louisiana' },
65 
          { val: 'Maine' },
66 
          { val: 'Maryland' },
67 
          { val: 'Massachusetts' },
68 
          { val: 'Michigan' },
69 
          { val: 'Minnesota' },
70 
          { val: 'Mississippi' },
71 
          { val: 'Missouri' },
72 
          { val: 'Montana' },
73 
          { val: 'Nebraska' },
74 
          { val: 'Nevada' },
75 
          { val: 'New Hampshire' },
76 
          { val: 'New Jersey' },
77 
          { val: 'New Mexico' },
78 
          { val: 'New York' },
79 
          { val: 'North Carolina' },
80 
          { val: 'North Dakota' },
81 
          { val: 'Ohio' },
82 
          { val: 'Oklahoma' },
83 
          { val: 'Oregon' },
84 
          { val: 'Pennsylvania' },
85 
          { val: 'Rhode Island' },
86 
          { val: 'South Carolina' },
87 
          { val: 'South Dakota' },
88 
          { val: 'Tennessee' },
89 
          { val: 'Texas' },
90 
          { val: 'Utah' },
91 
          { val: 'Vermont' },
92 
          { val: 'Virginia' },
93 
          { val: 'Washington' },
94 
          { val: 'West Virginia' },
95 
          { val: 'Wisconsin' },
96 
          { val: 'Wyoming' },
97 
          { val: 'this is a very long value so deal with it' }
98 
        ]
99 
      });
100 
 
101 
      states.initialize();
102 
 
103 
      $('#states').typeahead({
104 
        highlight: true
105 
      },
106 
      {
107 
        displayKey: 'val',
108 
        source: states.ttAdapter()
109 
      });
110 
    </script>
111 
  </body>
112 
</html>