[jQuery]typeahead.js

typeahead 是 twitter 開發的auto-complete套件
typeahead github

範例

$('.example-countries .typeahead').typeahead({
	name: 'countries',
	prefetch: '../data/countries.json',
	limit: 10
});

官方有提供 example頁面

另外在與bootstrap 3 結合時，官方提供的CSS較舊，可能會造成跑版的狀況
可以參考使用從 這裡 引用後再自己改寫的CSS

.twitter-typeahead {
    width: 100%;
    position: relative;
}

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
    margin-bottom: 0;
    width:100%;
    height: 34px;
    position: absolute;
    top:0;
    left:0;
}

.twitter-typeahead .tt-hint {
    color:#a1a1a1;
    z-index: 1;
    padding: 6px 12px;
    border:1px solid transparent;
}

.twitter-typeahead .tt-query {
    z-index: 2;
    border-radius: 4px!important;
}

.tt-dropdown-menu {
    width:100%;
    margin-top: 2px;
    padding: 5px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -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);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.tt-suggestion {
    display: block;
    padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #0081c2;
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}

.tt-suggestion.tt-is-under-cursor a {
    color: #fff;
}

.tt-suggestion p {
    margin: 0;
}