bootstrap 2 有很多 typeahead ajax 示例，例如这里twitter bootstrap typeahead ajax example。
但是我使用的是 bootstrap 3，我找不到完整的示例，而是有一堆不完整的信息 sn-ps 与其他网站的链接，例如这里Where is the typeahead JavaScript module in Bootstrap 3 RC 1?
如果您通过 ajax 从服务器加载数据，每次用户更改输入时，有人可以发布一个关于如何在引导程序 3 中使用 typeahead 的完整工作示例。
【问题讨论】：
标签： autocomplete twitter-bootstrap-3 typeahead.js bootstrap-typeahead
通过 bootstrap3-typeahead，我可以使用以下代码：
<input id="typeahead-input" type="text" data-provide="typeahead" />
<script type="text/javascript">
jQuery(document).ready(function() {
$('#typeahead-input').typeahead({
source: function (query, process) {
return $.get('search?q=' + query, function (data) {
return process(data.search_results);
});
}
});
})
</script>
后端在searchGET端点下提供搜索服务，接收q参数中的查询，返回{ 'search_results': ['resultA', 'resultB', ... ] }格式的JSON。 search_resultsarray 的元素显示在 typeahead 输入中。
【讨论】：
process 是什么意思？？
这是我的分步体验，灵感来自 typeahead examples，来自我们正在开发的 Scala/PlayFramework 应用程序。
在脚本LearnerNameTypeAhead.coffee (convertible of course to JS) 我有：
$ ->
learners = new Bloodhound(
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value")
queryTokenizer: Bloodhound.tokenizers.whitespace
remote: "/learner/namelike?nameLikeStr=%QUERY"
)
learners.initialize()
$("#firstName").typeahead
minLength: 3
hint: true
highlight:true
,
name: "learners"
displayKey: "value"
source: learners.ttAdapter()
我在页面上包含了预输入包和我的脚本，并且我的输入字段周围有一个div，如下所示：
<script src=@routes.Assets.at("javascripts/typeahead.bundle.js")></script>
<script src=@routes.Assets.at("javascripts/LearnerNameTypeAhead.js") type="text/javascript" ></script>
<div>
<input name="firstName" id="firstName" class="typeahead" placeholder="First Name" value="@firstName">
</div>
结果是，对于输入字段中第一个 minLength (3) 个字符之后键入的每个字符，页面都会发出一个 GET 请求，其 URL 类似于 /learner/namelike?nameLikeStr= 加上当前键入的字符。服务器代码返回一个包含字段“id”和“value”的对象的json数组，例如：
[ {
"id": "109",
"value": "Graham Jones"
},
{
"id": "5833",
"value": "Hezekiah Jones"
} ]
为了玩，我需要路线文件中的一些东西：
GET /learner/namelike controllers.Learners.namesLike(nameLikeStr:String)
最后，我在页面的<head>（或可访问的 .css）中包含一个新的 typeahead.css 文件中为下拉菜单等设置了一些样式
.tt-dropdown-menu {
width: 252px;
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);
}
.typeahead {
background-color: #fff;
}
.typeahead:focus {
border: 2px solid #0097cf;
}
.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-hint {
color: #999
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
【讨论】：
$("#getLearnerLike .typeahead")，这是该 div 中的输入字段。
我正在使用这个 https://github.com/biggora/bootstrap-ajax-typeahead
使用 Codeigniter/PHP 的代码结果
<pre>
$("#produto").typeahead({
onSelect: function(item) {
console.log(item);
getProductInfs(item);
},
ajax: {
url: path + 'produto/getProdName/',
timeout: 500,
displayField: "concat",
valueField: "idproduto",
triggerLength: 1,
method: "post",
dataType: "JSON",
preDispatch: function (query) {
showLoadingMask(true);
return {
search: query
}
},
preProcess: function (data) {
if (data.success === false) {
return false;
}else{
return data;
}
}
}
});
</pre>
【讨论】：
【讨论】：
<input id="typeahead-input" type="text" data-provide="typeahead" />
<script type="text/javascript">
var data = ["Aamir", "Amol", "Ayesh", "Sameera", "Sumera", "Kajol", "Kamal",
"Akash", "Robin", "Roshan", "Aryan"];
$(function() {
$('#typeahead-input').typeahead({
source: function (query, process) {
process(data);
});
}
});
});
</script>
【讨论】：