Bootstrap 3 style fixes for using Typeahead.js

Typeahead-BS3-css

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
	margin-bottom: 0;
}
.tt-hint {
	display: block;
	width: 100%;
	height: 38px;
	padding: 8px 12px;
	font-size: 14px;
	line-height: 1.428571429;
	color: #999;
	vertical-align: middle;
	background-color: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.tt-dropdown-menu {
	min-width: 160px;
	margin-top: 2px;
	padding: 5px 0;
	background-color: #ffffff;
	border: 1px solid #cccccc;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	background-clip: padding-box;

}
.tt-suggestion {
	display: block;
	padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
	color: #fff;
	background-color: #428bca;
}
.tt-suggestion.tt-is-under-cursor a {
	color: #fff;
}
.tt-suggestion p {
	margin: 0;
}

Yeah - definitively of great help. Alternatively you may change line 8 from "height: 38px;" to "height: 34px;" so that elements have the same height (especially for colored background)

Worked great for me. Thank you!

Worked for me as well. Thank you very much!!!

Thank you so much worked for me too!!

What everyone else said:

• "you're a genius"
• "definitely of great help"
• "thank you so much worked for me too!"

I owe you a beer.

works for me, thanks dude.

worked for me except the name "tt-is-under-cursor" is now "tt-cursor"

thanks a lot

It works! Thanks.

I had to change tt-dropdown-menu to tt-menu and tt-is-under-cursor to tt-cursor

Awesome! But there are some minor changes since for the last version of typeahead.
I've forked a version of yours and changed some of the stuff. https://gist.github.com/mkli90/0859df40b3075c2df8c3.js. Feel free to use them. What has changed? ..tt-suggestoin.tt-under-cursor is now tt-suggestion:hover and .tt-dropdown-menu is now .tt-menu. Other than that great work!

Thanks @mkli90 - this is a usable version: https://gist.github.com/joelhaasnoot/c7f3358726c22d489566

Congrats! Very helpful...

its working and thanks.if u want to get full size for text field try this # width: 100%;

.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
cursor: pointer;
border-radius: 4px;
width: 100%;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;

    }

Awesome work dude, I had to make some tweaks to get it to work with my version of typeahead (0.11.1) (credit to @kabal for initial pointers), and I created a fork here: https://gist.github.com/AntMooreWebDev/2f7e423a11bc74359323995df4494167.

I also amended the styling so that the suggested options span the width of the menu.