我试图找到一个工作的twitter bootstrap typeahead元素的例子，将使ajax调用来填充它的下拉列表。
我有一个现有的工作jquery自动完成的例子，它定义了ajax url和如何处理回复
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = { minChars:3, max:20 };
$("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
function(event, data, formatted)
{
window.location = "./runner/index/id/"+data[1];
}
);
..
我需要改变什么来转换这到typeahead的例子?
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = { source:'/index/runnerfilter/format/html', items:5 };
$("#runnerquery").typeahead(options).result(
function(event, data, formatted)
{
window.location = "./runner/index/id/"+data[1];
}
);
..
我将等待“为typeahead添加远程源支持”问题得到解决。
可以使用Bootstrap进行调用。当前版本没有任何源代码更新问题
麻烦更新Bootstrap的输入前数据源与后响应
，也就是说，bootstrap的源代码一旦更新，就可以再次修改。
请参考下面的例子:
jQuery('#help').typeahead({
source : function(query, process) {
jQuery.ajax({
url : "urltobefetched",
type : 'GET',
data : {
"query" : query
},
dataType : 'json',
success : function(json) {
process(json);
}
});
},
minLength : 1,
});
编辑:typeahead不再捆绑在Bootstrap 3中。查看:
在Bootstrap 3 RC 1中输入JavaScript模块在哪里?
typeahead.js
从Bootstrap 2.1.0到2.3.2，你可以这样做:
$('.typeahead').typeahead({
source: function (query, process) {
return $.get('/typeahead', { query: query }, function (data) {
return process(data.options);
});
}
});
像这样使用JSON数据:
{
"options": [
"Option 1",
"Option 2",
"Option 3",
"Option 4",
"Option 5"
]
}
注意JSON数据必须是正确的mime类型(application/ JSON)，这样jQuery才能将其识别为JSON。
从Bootstrap 2.1.0开始:
HTML:
<input type='text' class='ajax-typeahead' data-link='your-json-link' />
Javascript:
$('.ajax-typeahead').typeahead({
source: function(query, process) {
return $.ajax({
url: $(this)[0].$element[0].dataset.link,
type: 'get',
data: {query: query},
dataType: 'json',
success: function(json) {
return typeof json.options == 'undefined' ? false : process(json.options);
}
});
}
});
现在您可以创建统一的代码，在html代码中放置“json-request”链接。
可以使用Bootstrap进行调用。当前版本没有任何源代码更新问题
麻烦更新Bootstrap的输入前数据源与后响应
，也就是说，bootstrap的源代码一旦更新，就可以再次修改。
请参考下面的例子:
jQuery('#help').typeahead({
source : function(query, process) {
jQuery.ajax({
url : "urltobefetched",
type : 'GET',
data : {
"query" : query
},
dataType : 'json',
success : function(json) {
process(json);
}
});
},
minLength : 1,
});
