"Til Kollega"
Bootstrap 3.1.0 Snippet by rasmus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--script type="text/javascript" src="https://raw.githubusercontent.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.min.js"></script--> <script type="text/javascript" src="https://raw.githubusercontent.com/twitter/typeahead.js/master/dist/typeahead.bundle.min.js"></script> <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Send til kollega</h4> </div> <div class="modal-body"> <form class="form form-horizontal" role="form"> <div class="form-group" id="the-basics" name="the-basics"> <input id="kollega_input" name="kollega_input" class="typeahead form-control" type="text" placeholder="Kollega" data-provide="typeahead"/> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Annuller</button> <button type="button" class="btn btn-default">Godkend & send</button> <button type="button" class="btn btn-primary">Send</button> </div> </div> </div> </div>
.twitter-typeahead .tt-hint { display: block; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; border: 1px solid transparent; border-radius:4px; } .twitter-typeahead .hint-small { height: 30px; padding: 5px 10px; font-size: 12px; border-radius: 3px; line-height: 1.5; } .twitter-typeahead .hint-large { height: 45px; padding: 10px 16px; font-size: 18px; border-radius: 6px; line-height: 1.33; } .twitter-typeahead { width: 100%; } .tt-dropdown-menu { width: 100%; padding: 10px 16px; border-radius: 4px; border: solid 1px; background: white; border-color: rgba(82,168,236,.8); outline: 0; outline: thin dotted \9; -moz-box-shadow: 0 0 8px rgba(82,168,236,.6); box-shadow: 0 0 8px rgba(82,168,236,.6); } .tt-hint { width: 100%; }
var substringMatcher = function(strs) { return function findMatches(q, cb) { var matches, substringRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array $.each(strs, function(i, str) { if (substrRegex.test(str)) { // the typeahead jQuery plugin expects suggestions to a // JavaScript object, refer to typeahead docs for more info matches.push({ value: str }); } }); cb(matches); }; }; var states = ['Jan Gerner Kroberg - JGK', 'Jane Sild - JSO' ]; $(function() { $('#the-basics .typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'states', displayKey: 'value', source: substringMatcher(states) }); })

Related: See More

Questions / Comments: