JOOMY.net Your slogan goes here

Následují příklad pomáhá rychle zadat název jednoho ze států USA bez použití JavaScriptu.

<input type="text" data-provide="typeahead" data-items="4"
data-source='["Alabama","Alaska", ... ,"Wyoming"]' />

Přidáním data attributů se u vybraného elementu vytvoří funkčnost našeptávače.
Parametry se předávají pomocí data attributů nebo JavaScriptu. U data attributů se jeho název přidá k data-, např. data-source="".

Stejný našeptávač s využitím JavaScriptu.

<input type="text" class="priklad1" />

<script type="text/javascript">
   $(".priklad1").typeahead({
      source: ["Alabama","Alaska", ... ,"Wyoming"] 
   });
</script>

Našeptávač se jménem a fotkou kapely. Jako zdroj dat je použito externí pole objektů získané pomocí Ajax.
Zkuste napsat písmeno "a".

<div class="row-fluid">
<input type="text" class="priklad2 span6 pull-right" >
</div>

<script type="text/javascript">
   $(document).ready(function() {   
       $(".priklad2").typeahead({
           source: function(query, process) {
              objects = [];
              map = {};
              $.ajax({
                  url: 'json.php',
                  dataType: 'json',
                  data: {q: query},
                  success: function(data) {
                      $.each(data, function(i, object) {
                         map[object.name] = object;
                         objects.push(object.name);
                     });
                     process(objects);
                  }
              });
           },
           highlighter: function (item) {
               var t = map[item];
               var itm = ''
                       + "<div class='typeahead_wrapper'>"
                       + "<img class='typeahead_photo' src='" + t.photo + "' />"
                       + "<div class='typeahead_labels'>"
                       + "<div class='typeahead_primary'>" + t.name + "</div>"
                       + "<div class='typeahead_secondary'>" + t.id + "</div>"
                       + "</div>"
                       + "</div>";
               return itm;   
           },        
           updater: function(item) {
               alert(map[item].id);
               return item;
           }
       });
   });
</script>

json.php vrací:

[{ "id":1, "name":"ABBA", "photo":"abba.jpg" },
{ "id":2, "name":"Adele", "photo":"adele.jpg" },
{ "id":3, "name":"AG Flek", "photo":"agflek.jpg" },
{ "id":4, "name":"Alkehol", "photo":"alkehol.jpg" },
{ "id":5, "name":"Arakain", "photo":"arakain.jpg" },
{ "id":6, "name":"Argema", "photo":"argema.jpg" }]

styly css:

.typeahead_wrapper { display: block; height: 50px;}
.typeahead_photo { float: left; max-width: 50px; max-height: 50px; margin-right: 20px; }
.typeahead_labels { float: left; height: 30px; width: 210px; white-space: normal;}
.typeahead_primary { font-weight: bold; }
.typeahead_secondary { font-size: .8em; margin-top: 1px; font-weight: normal; }
.typeahead .active > a, .typeahead .active > a:hover { color: #ddd; }