<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/twitter/typeahead.js/master/dist/typeahead.bundle.min.js"></script> <style> ul.nav>li>div.dropdown { padding: 8px; } thead > tr > th { height: 0px; } thead > tr > th > span.label { position: relative; bottom: -10px; left: -4px; } #bilag-dropdown { position: relative; top: -24px; } </style> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <div class="navbar navbar-default"> <div class="navbar-header"><a class="navbar-brand" href="#">SignFlow Faktura</a></div> <ul class="nav navbar-nav"> <li><a href="x7KM" target="_top">Oversigt</a></li> <li class="active"><a href="4AXB" target="_top">Faktura</a></li> <li><a href="yRqV" target="_top">Noter <span class="badge">4</span></a></li> <li> <div class="dropdown btn-group pagination-centered"> <button type="button" class="btn btn-primary">Godkend</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Retur</a></li> <li><a href="#" data-toggle="modal" data-target="#myModal">Til kollega</a></li> </ul> </div> </li> </ul> <ul class="nav navbar-nav pull-right"> <li class="pull-right"><a href="#">Rasmus Fuglsang</a></li> </ul> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Detaljer</h3> </div> <div class="panel-body"> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-5 control-label">Leverandør</label> <div class="col-sm-7"><p class="form-control-static">pil.dk & Quickpay</p></div> </div> <div class="form-group hidden-sm hidden-xs"> <label class="col-sm-5 control-label">Adresse</label> <div class="col-sm-7"><p class="form-control-static">FGE Rostrupvej 2<br/>8000 Aarhus C</p></div> </div> <div class="form-group"> <label class="col-sm-5 control-label">Faktura</label> <div class="col-sm-7"><p class="form-control-static pull-right">33360</p></div> </div> <div class="form-group"> <label class="col-sm-5 control-label">Fakturadato</label> <div class="col-sm-7"><p class="form-control-static pull-right">03-10-2011</p></div> </div> <div class="form-group"> <label class="col-sm-5 control-label">Forfaldsdato</label> <div class="col-sm-7"><p class="form-control-static pull-right">11-10-2011</p></div> </div> <div class="form-group"> <label class="col-sm-5 control-label">Beløb</label> <div class="col-sm-7"><p class="form-control-static pull-right">3000</p></div> </div> <div class="form-group"> <label class="col-sm-5 control-label">Moms</label> <div class="col-sm-7"><p class="form-control-static pull-right">750</p></div> </div> <div class="form-group"> <label class="col-sm-5 control-label">Total</label> <div class="col-sm-7"><p class="form-control-static pull-right">3750</p></div> </div> </form> </div> </div> </div> <div class="col-md-9 hidden-xs"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Dokument</h3><div id="bilag-dropdown" class="dropdown panel-title pull-right"><button class="dropdown-toggle btn btn-sm btn-default" data-toggle="dropdown">faktura01.tif [1/2] <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">faktura01.tif [2/2]</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">bilag01.xsl [1/1]</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">kontrakt.doc [1/1]</a></li> </ul> </div> </div> <div class="panel-body"> <img src='http://i.imgur.com/ZAjR7m4.png?1' /> </div> </div> </div> </div> <!-- 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) }); })