/*
il codice html del form al quale si associa un'azione typeahead:

<input id="ali-search" class="input-search" type="text" name="boh" />
<script>
		jQuery("#ali-search").typeahead([
			{
				name: "product",
				local: [ "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune" ]
			}
		]);
</script>	

viene sostituito automaticamente in jquery con il codice:

<div><span style="position: relative; display: inline-block; direction: ltr;" class="twitter-typeahead"><input value="mercury" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background: none repeat scroll 0px 0px rgb(255, 255, 255);" class="tt-hint" autocomplete="off" spellcheck="off" disabled="disabled" type="text"><input value="m" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;" spellcheck="false" autocomplete="off" id="ali-search" class="input-search tt-query" name="boh" type="text"><span style="position: absolute; left: -9999px; visibility: hidden; white-space: nowrap; font-family: MS Shell Dlg; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: optimizelegibility; text-transform: none;">m</span><span style="position: absolute; top: 100%; left: 0px; z-index: 100; display: block; right: auto;" class="tt-dropdown-menu"><div class="tt-dataset-product"><span style="display: block;" class="tt-suggestions"><div style="white-space: nowrap; cursor: pointer;" class="tt-suggestion"><p style="white-space: normal;">Mercury</p></div><div style="white-space: nowrap; cursor: pointer;" class="tt-suggestion"><p style="white-space: normal;">Mars</p></div></span></div></span></span></div>
*/
.twitter-typeahead{
	float:left;
}

.input-search, .tt-hint, .tt-query{
background: url(../images/input-bg.png) repeat-x scroll left top #000;border: medium none;border-radius: 4px;-webkit-border-radius:4px;-moz-border-radius:4px;float: left;height: 26px;line-height: 26px;margin: 12px 4px 0 10px;padding: 4px 10px;width: 324px;
}

.input-search:focus {
  /*border: 2px solid #004072; */   
}

.tt-hint {
  color: #999
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-dropdown-menu{
  color: #606060;
  text-align: left;
  width: 400px;
  margin-top: 12px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  /*-webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  */
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);  
}

.tt-dataset-product{
}

.tt-suggestions{
}

.tt-suggestion {
  padding: 3px 10px;
  font-size: 14px;
  line-height: 18px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion p {
  margin: 0;
}