我试图找到一个工作的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添加远程源支持”问题得到解决。
编辑: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提前输入,这在BootStrap 3中不再存在。
对于在这里使用新的引导后Twitter typeahead.js寻找AJAX示例的其他人,这里有一个工作示例。语法有点不同:
$('#mytextquery').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
limit: 12,
async: true,
source: function (query, processSync, processAsync) {
processSync(['This suggestion appears immediately', 'This one too']);
return $.ajax({
url: "/ajax/myfilter.php",
type: 'GET',
data: {query: query},
dataType: 'json',
success: function (json) {
// in this example, json is simply an array of strings
return processAsync(json);
}
});
}
});
本例同时使用同步(对processSync的调用)和异步建议,因此您会看到一些选项立即出现,然后添加其他选项。你可以只用其中一个。
有许多可绑定的事件和一些非常强大的选项,包括使用对象而不是字符串,在这种情况下,您可以使用自己的自定义显示函数将项目呈现为文本。